Skip to content

Commit

Permalink
Fix issues navigating scene queue (#4325)
Browse files Browse the repository at this point in the history 
* Fix issues navigating between queue scenes
* Fix queue next/previous button display
* Autplay when clicking scene in queue
* Sticky queue controls
  • Loading branch information
@WithoutPants
WithoutPants authored Nov 29, 2023
1 parent 54461aa commit 5ebd3b3
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 37 deletions.
10 changes: 5 additions & 5 deletions ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface IPlaylistViewer {
export const QueueViewer: React.FC<IPlaylistViewer> = ({
scenes,
currentID,
start,
start = 0,
continue: continuePlaylist = false,
hasMoreScenes,
setContinue,
Expand All @@ -47,7 +47,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
const [lessLoading, setLessLoading] = useState(false);
const [moreLoading, setMoreLoading] = useState(false);

const currentIndex = scenes?.findIndex((s) => s.id === currentID);
const currentIndex = scenes?.findIndex((s) => s.id === currentID) ?? 0;

useEffect(() => {
setLessLoading(false);
Expand Down Expand Up @@ -119,7 +119,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
/>
</div>
<div>
{(currentIndex ?? 0) > 0 ? (
{currentIndex > 0 || start > 1 ? (
<Button
className="minimal"
variant="secondary"
Expand All @@ -130,7 +130,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
) : (
""
)}
{(currentIndex ?? 0) < (scenes ?? []).length - 1 ? (
{currentIndex < (scenes ?? []).length - 1 || hasMoreScenes ? (
<Button
className="minimal"
variant="secondary"
Expand All @@ -151,7 +151,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
</div>
</div>
<div id="queue-content">
{(start ?? 0) > 1 ? (
{start > 1 ? (
<div className="d-flex justify-content-center">
<Button onClick={() => lessClicked()} disabled={lessLoading}>
{!lessLoading ? (
Expand Down
86 changes: 54 additions & 32 deletions ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ interface IProps {
onDelete: () => void;
continuePlaylist: boolean;
loadScene: (sceneID: string) => void;
queueHasMoreScenes: () => boolean;
queueHasMoreScenes: boolean;
onQueueMoreScenes: () => void;
onQueueLessScenes: () => void;
queueStart: number;
Expand Down Expand Up @@ -450,7 +450,7 @@ const ScenePage: React.FC<IProps> = ({
onPrevious={onQueuePrevious}
onRandom={onQueueRandom}
start={queueStart}
hasMoreScenes={queueHasMoreScenes()}
hasMoreScenes={queueHasMoreScenes}
onLessScenes={onQueueLessScenes}
onMoreScenes={onQueueMoreScenes}
/>
Expand Down Expand Up @@ -594,9 +594,10 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
const [queueStart, setQueueStart] = useState(1);

const autoplay = queryParams.get("autoplay") === "true";
const currentQueueIndex = queueScenes
? queueScenes.findIndex((s) => s.id === id)
: -1;
const currentQueueIndex = useMemo(
() => (queueScenes ? queueScenes.findIndex((s) => s.id === id) : -1),
[queueScenes, id]
);

function getSetTimestamp(fn: (value: number) => void) {
_setTimestamp.current = fn;
Expand Down Expand Up @@ -656,14 +657,16 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
const newScenes = (scenes as QueuedScene[]).concat(queueScenes);
setQueueScenes(newScenes);
setQueueStart(newStart);

return scenes;
}

function queueHasMoreScenes() {
const queueHasMoreScenes = useMemo(() => {
return queueStart + queueScenes.length - 1 < queueTotal;
}
}, [queueStart, queueScenes, queueTotal]);

async function onQueueMoreScenes() {
if (!sceneQueue.query || !queueHasMoreScenes()) {
if (!sceneQueue.query || !queueHasMoreScenes) {
return;
}

Expand All @@ -677,6 +680,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
const newScenes = queueScenes.concat(scenes as QueuedScene[]);
setQueueScenes(newScenes);
// don't change queue start
return scenes;
}

function loadScene(sceneID: string, autoPlay?: boolean, newPage?: number) {
Expand All @@ -701,19 +705,42 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
}
}

function onQueueNext() {
async function onQueueNext() {
if (!queueScenes) return;

if (currentQueueIndex >= 0 && currentQueueIndex < queueScenes.length - 1) {
loadScene(queueScenes[currentQueueIndex + 1].id);
loadScene(queueScenes[currentQueueIndex + 1].id, true);
} else {
// if we're at the end of the queue, load more scenes
if (
currentQueueIndex >= 0 &&
currentQueueIndex === queueScenes.length - 1 &&
queueHasMoreScenes
) {
const loadedScenes = await onQueueMoreScenes();
if (loadedScenes && loadedScenes.length > 0) {
// set the page to the next page
const newPage = (sceneQueue.query?.currentPage ?? 0) + 1;
loadScene(loadedScenes[0].id, true, newPage);
}
}
}
}

function onQueuePrevious() {
async function onQueuePrevious() {
if (!queueScenes) return;

if (currentQueueIndex > 0) {
loadScene(queueScenes[currentQueueIndex - 1].id);
loadScene(queueScenes[currentQueueIndex - 1].id, true);
} else {
// if we're at the beginning of the queue, load the previous page
if (currentQueueIndex === 0 && queueStart > 1) {
const loadedScenes = await onQueueLessScenes();
if (loadedScenes && loadedScenes.length > 0) {
const newPage = (sceneQueue.query?.currentPage ?? 0) - 1;
loadScene(loadedScenes[loadedScenes.length - 1].id, true, newPage);
}
}
}
}

Expand Down Expand Up @@ -746,29 +773,24 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({

// load the next scene if we're continuing
if (continuePlaylist) {
if (
currentQueueIndex >= 0 &&
currentQueueIndex < queueScenes.length - 1
) {
loadScene(queueScenes[currentQueueIndex + 1].id, true);
}
onQueueNext();
}
}

function onNext() {
if (!queueScenes) return;
function getScenePage(sceneID: string) {
if (!sceneQueue.query) return;

if (currentQueueIndex >= 0 && currentQueueIndex < queueScenes.length - 1) {
loadScene(queueScenes[currentQueueIndex + 1].id, true);
}
}
// find the page that the scene is on
const index = queueScenes.findIndex((s) => s.id === sceneID);

function onPrevious() {
if (!queueScenes) return;
if (index === -1) return;

if (currentQueueIndex > 0) {
loadScene(queueScenes[currentQueueIndex - 1].id, true);
}
const perPage = sceneQueue.query.itemsPerPage;
return Math.floor((index + queueStart - 1) / perPage) + 1;
}

function onSceneClicked(sceneID: string) {
loadScene(sceneID, true, getScenePage(sceneID));
}

if (!scene) {
Expand All @@ -789,7 +811,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
onQueuePrevious={onQueuePrevious}
onQueueRandom={onQueueRandom}
continuePlaylist={continuePlaylist}
loadScene={loadScene}
loadScene={onSceneClicked}
queueHasMoreScenes={queueHasMoreScenes}
onQueueLessScenes={onQueueLessScenes}
onQueueMoreScenes={onQueueMoreScenes}
Expand All @@ -807,8 +829,8 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
initialTimestamp={initialTimestamp}
sendSetTimestamp={getSetTimestamp}
onComplete={onComplete}
onNext={onNext}
onPrevious={onPrevious}
onNext={onQueueNext}
onPrevious={onQueuePrevious}
/>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions ui/v2.5/src/components/Scenes/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,9 +543,13 @@ input[type="range"].blue-slider {
#queue-viewer {
.queue-controls {
align-items: center;
background-color: $body-bg;
display: flex;
flex: 0 1 auto;
height: 30px;
justify-content: space-between;
position: sticky;
top: 0;
}

.thumbnail-container {
Expand Down

0 comments on commit 5ebd3b3

Please sign in to comment.