Refactored createAudioElement

digitalbiblesociety · Dec 11, 2024 · f19e4c8 · f19e4c8
1 parent e635d3c
commit f19e4c8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 68 deletions.
diff --git a/src/AudioPlayerMedia.js b/src/AudioPlayerMedia.js
@@ -6,84 +6,64 @@ import { handleBookChange } from "./AudioPlayerBibleList.js";
 import { createProgressBar } from './MediaProgressBar.js'
 
 export function createAudioElement(ctx) {
-    const container = document.createDocumentFragment();
-    const controlsContainer = elem('div', { className: ctx.class.controlsContainer });
     const navRow = elem('div', { className: ctx.class.navRow });
+    navRow.append(
+        createBookNavigationButton(ctx, 'prev'),
+        createChapterNavigationButton(ctx, 'prev'),
+        createSkipButton(ctx, 'back'),
+        createPlayPauseButton(ctx),
+        createSkipButton(ctx, 'forward'),
+        createChapterNavigationButton(ctx, 'next'),
+        createBookNavigationButton(ctx, 'next')
+    );
+    const controlsContainer = elem('div', { className: ctx.class.controlsContainer });
+    controlsContainer.append(
+        createProgressBar(ctx),
+        createPlaybackRateControls(ctx),
+        navRow,
+        createVolumeAndSleepControls(ctx)
+    );
+    return controlsContainer;
+}
 
-    const prevBookButton = elem('button', {
-        className: ctx.class.prevBookButton,
-        innerHTML: ctx.icons.PrevBook,
-        onclick: () => {
-            const index = ctx.currentBooks.data.findIndex(book => book.book_id === ctx.currentBook.book_id);
-            if(ctx.currentBooks.data[index - 1]) {
-                handleBookChange(ctx, ctx.currentBooks.data[index - 1].book_id)
-                handleChapterChange(ctx, ctx.currentBooks.data[index - 1], 1)
-            }
-        }
-    });
-
-    const prevChapterButton = elem('button', {
-        className: ctx.class.prevChapterButton,
-        innerHTML: ctx.icons.PrevChapter,
-        onclick: () => prevChapter(ctx)
-    });
-
-    const skipBackButton = createSkipButton(ctx, 'back');
-    const playIcon = elem('span', {className: ctx.class.playPauseIcon,innerHTML: ctx.icons.play});
+function createPlayPauseButton(ctx) {
     const playPauseButton = elem('button', {
         className: ctx.class.playPauseButton,
         onclick: () => ctx.audio.paused ? ctx.audio.play() : ctx.audio.pause()
     });
-    playPauseButton.appendChild(playIcon);
-    ctx.audio.addEventListener('play', () => {
-        playIcon.innerHTML = ctx.icons.pause;
-    });
-    ctx.audio.addEventListener('pause', () => {
-        playIcon.innerHTML = ctx.icons.play;
-    });
 
+    const playIcon = elem('span', {className: ctx.class.playPauseIcon,innerHTML: ctx.icons.play});
+    playPauseButton.appendChild(playIcon);
+    ctx.audio.addEventListener('play', () => { playIcon.innerHTML = ctx.icons.pause; });
+    ctx.audio.addEventListener('pause', () => { playIcon.innerHTML = ctx.icons.play; });
+    return playPauseButton;
+}
 
-    const skipForwardButton = createSkipButton(ctx, 'forward');
-    const nextChapterButton = elem('button', {
-        className: ctx.class.nextChapterButton,
-        innerHTML: ctx.icons.nextChapter,
-        onclick: () => nextChapter(ctx)
-    });
 
-    const nextBookButton = elem('button', {
-        className: ctx.class.nextBookButton,
-        innerHTML: ctx.icons.nextBook,
+function createBookNavigationButton(ctx, dir) {
+    return elem('button', {
+        className: ctx.class[`${dir}BookButton`],
+        innerHTML: ctx.icons[`${dir}Book`],
         onclick: () => {
             const index = ctx.currentBooks.data.findIndex(book => book.book_id === ctx.currentBook.book_id);
-            if(ctx.currentBooks.data[index + 1]) {
-                handleBookChange(ctx, ctx.currentBooks.data[index + 1].book_id)
-                handleChapterChange(ctx, ctx.currentBooks.data[index + 1], 1)
+            const nextIndex = dir === 'prev' ? index - 1 : index + 1;
+            if (ctx.currentBooks.data[nextIndex]) {
+                handleBookChange(ctx, ctx.currentBooks.data[nextIndex].book_id);
+                handleChapterChange(ctx, ctx.currentBooks.data[nextIndex], 1);
             }
         }
     });
+}
 
-    navRow.append(
-        prevBookButton,
-        prevChapterButton,
-        skipBackButton,
-        playPauseButton,
-        skipForwardButton,
-        nextChapterButton,
-        nextBookButton
-    );
-
-    controlsContainer.append(createProgressBar(ctx));
-    controlsContainer.append(createPlaybackRateControls(ctx));
-    controlsContainer.append(navRow);
-    const { volumeRow, sleepTimerButton } = createVolumeAndSleepControls(ctx);
-
-    controlsContainer.appendChild(volumeRow);
-    volumeRow.appendChild(sleepTimerButton);
-    volumeRow.appendChild(sleepTimerButton);
-    controlsContainer.appendChild(volumeRow);
-    container.appendChild(controlsContainer);
-
-    return container;
+function createChapterNavigationButton(ctx, dir) {
+    return elem('button', {
+        className: ctx.class[`${dir}ChapterButton`],
+        innerHTML: ctx.icons[`${dir}Chapter`],
+        onclick: () => {
+            const action = dir === 'prev' ? prevChapter : nextChapter;
+            action(ctx);
+        }
+    });
 }
 
 export async function prevChapter(ctx) {

diff --git a/src/AudioPlayerStyles.js b/src/AudioPlayerStyles.js
diff --git a/src/MediaSleepTimer.js b/src/MediaSleepTimer.js
@@ -2,6 +2,7 @@ import { elem, formatTime } from "./AudioPlayerHelpers.js";
 
 export function createVolumeAndSleepControls(ctx) {
     const volumeRow = elem('div', { className: ctx.class.volumeRow });
+
     const volumeInput = elem('input', {
         type: 'range',
         min: '0',
@@ -12,7 +13,10 @@ export function createVolumeAndSleepControls(ctx) {
         value: ctx.audio.volume,
         'aria-label': 'Volume Control'
     });
-    volumeInput.addEventListener('input', () => {ctx.audio.volume = parseFloat(volumeInput.value)});
+    volumeInput.addEventListener('input', () => {
+        ctx.audio.volume = parseFloat(volumeInput.value);
+    });
+
     const volumeLabel = elem('label', {
         htmlFor: 'volume-control',
         className: ctx.class.volumeLabel,
@@ -26,16 +30,19 @@ export function createVolumeAndSleepControls(ctx) {
         innerHTML: ctx.icons.sleepTimer,
         'aria-label': 'Sleep Timer'
     });
+
     let sleepTimer = null;
     let elapsedTime = 0;
     const sleepDuration = 1 * 60 * 1000;
+
     const sleepTimerDuration = elem('span', {
         className: ctx.class.sleepTimerDuration,
         textContent: formatTime(sleepDuration / 1000),
         'aria-live': 'polite'
     });
 
     sleepTimerButton.appendChild(sleepTimerDuration);
+
     sleepTimerButton.addEventListener('click', () => {
         if (sleepTimer) {
             clearInterval(sleepTimer);
@@ -75,5 +82,7 @@ export function createVolumeAndSleepControls(ctx) {
         }
     }
 
-    return { volumeRow, sleepTimerButton };
-}
+    volumeRow.appendChild(sleepTimerButton);
+
+    return volumeRow;
+}