Refactor Feed model to create new feed for library item

Translations update from Hosted Weblate

client/components/app/Appbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-60">
+    <div id="appbar" role="toolbar" aria-label="Appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-60">
       <div class="flex h-full items-center">
         <nuxt-link to="/">
           <img src="~static/icon.svg" :alt="$strings.ButtonHome" class="w-8 min-w-8 h-8 mr-2 sm:w-10 sm:min-w-10 sm:h-10 sm:mr-4" />

client/components/app/BookShelfCategorized.vue

@@ -17,7 +17,7 @@
     <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
       <template v-for="(shelf, index) in supportedShelves">
         <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</p>
+          <h2 class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</h2>
         </widgets-item-slider>
       </template>
     </div>

client/components/app/BookShelfRow.vue

@@ -37,18 +37,18 @@
     <div class="relative">
       <div class="relative text-center categoryPlacard transform z-30 top-0 left-4e md:left-8e w-44e rounded-md">
         <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
-          <p :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <h2 :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</h2>
         </div>
       </div>
 
       <div class="bookshelfDividerCategorized h-6e w-full absolute top-0 left-0 right-0 z-20"></div>
     </div>
-    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
+    <button v-show="canScrollLeft && !isScrolling" :aria-label="$strings.ButtonScrollLeft" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollLeft">
       <span class="material-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_left</span>
-    </div>
-    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
+    </button>
+    <button v-show="canScrollRight && !isScrolling" :aria-label="$strings.ButtonScrollRight" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-40" @click="scrollRight">
       <span class="material-symbols text-white" :style="{ fontSize: 3.75 + 'em' }">chevron_right</span>
-    </div>
+    </button>
   </div>
 </template>
 

client/components/app/BookShelfToolbar.vue

@@ -43,7 +43,7 @@
         <p class="text-sm">{{ $strings.ButtonAdd }}</p>
       </nuxt-link>
     </div>
-    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
+    <div id="toolbar" role="toolbar" aria-label="Library Toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
       <!-- Series books page -->
       <template v-if="selectedSeries">
         <p class="pl-2 text-base md:text-lg">

client/components/app/ConfigSideNav.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="w-44 fixed left-0 top-16 bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
+  <div role="toolbar" aria-orientation="vertical" aria-label="Config Sidebar">
+    <div role="navigation" aria-label="Config Navigation" class="w-44 fixed left-0 top-16 bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
       <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
         <span class="material-symbols text-2xl">arrow_back</span>
       </div>

client/components/app/SideRail.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-50" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
+  <div role="toolbar" aria-orientation="vertical" aria-label="Library Sidebar" class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-50" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
     <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
     <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
 
-    <div id="siderail-buttons-container" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
+    <div id="siderail-buttons-container" role="navigation" aria-label="Library Navigation" :class="{ 'player-open': streamLibraryItem }" class="w-full overflow-y-auto overflow-x-hidden">
       <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />

client/components/cards/AuthorCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
+  <article class="pb-3e" :style="{ minWidth: cardWidth + 'px', maxWidth: cardWidth + 'px' }">
     <nuxt-link :to="`/author/${author?.id}`">
       <div cy-id="card" @mouseover="mouseover" @mouseleave="mouseleave">
         <div cy-id="imageArea" :style="{ height: cardHeight + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
@@ -34,7 +34,7 @@
         </div>
       </div>
     </nuxt-link>
-  </div>
+  </article>
 </template>
 
 <script>

client/components/cards/LazyBookCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <article ref="card" :id="`book-card-${index}`" tabindex="0" :aria-label="displayTitle" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
       <!-- When cover image does not fill -->
       <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
@@ -14,21 +14,21 @@
       </div>
 
       <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
+        <div cy-id="titleImageNotReady" v-show="libraryItem && !imageReady" aria-hidden="true" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: 0.5 + 'em' }">
           <p :style="{ fontSize: 0.8 + 'em' }" class="text-gray-300 text-center">{{ title }}</p>
         </div>
 
         <!-- Cover Image -->
-        <img cy-id="coverImage" v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+        <img cy-id="coverImage" v-show="libraryItem" :alt="`${displayTitle}, ${$strings.LabelCover}`" ref="cover" aria-hidden="true" :src="bookCoverSrc" class="relative w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
 
         <!-- Placeholder Cover Title & Author -->
         <div cy-id="placeholderTitle" v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em' }">
           <div>
-            <p cy-id="placeholderTitleText" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
+            <p cy-id="placeholderTitleText" aria-hidden="true" class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'em' }">{{ titleCleaned }}</p>
           </div>
         </div>
         <div cy-id="placeholderAuthor" v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'em', bottom: authorBottom + 'em' }">
-          <p cy-id="placeholderAuthorText" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
+          <p cy-id="placeholderAuthorText" aria-hidden="true" class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'em' }">{{ authorCleaned }}</p>
         </div>
 
         <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }" style="background-color: #78350f">
@@ -93,11 +93,11 @@
 
         <!-- rss feed icon -->
         <div cy-id="rssFeed" v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 + 'em' }">
-          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
+          <span class="material-symbols" aria-hidden="true" :style="{ fontSize: 1.5 + 'em' }">rss_feed</span>
         </div>
         <!-- media item shared icon -->
         <div cy-id="mediaItemShare" v-if="mediaItemShare && !isSelectionMode && !isHovering" class="absolute text-success left-0 z-10" :style="{ padding: 0.375 + 'em', top: rssFeed ? '2em' : '0px' }">
-          <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">public</span>
+          <span class="material-symbols" aria-hidden="true" :style="{ fontSize: 1.5 + 'em' }">public</span>
         </div>
 
         <!-- Series sequence -->
@@ -114,7 +114,7 @@
 
         <!-- Podcast Num Episodes -->
         <div cy-id="numEpisodes" v-else-if="!numEpisodesIncomplete && numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', width: 1.25 + 'em', height: 1.25 + 'em' }">
-          <p :style="{ fontSize: 0.8 + 'em' }">{{ numEpisodes }}</p>
+          <p :style="{ fontSize: 0.8 + 'em' }" role="status" :aria-label="$strings.LabelNumberOfEpisodes">{{ numEpisodes }}</p>
         </div>
 
         <!-- Podcast Num Episodes -->
@@ -128,7 +128,7 @@
     <div cy-id="detailBottom" :id="`description-area-${index}`" v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="relative mt-2e mb-2e left-0 z-50 w-full">
       <div :style="{ fontSize: 0.9 + 'em' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
-          <p cy-id="title" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
+          <p cy-id="title" ref="displayTitle" aria-hidden="true" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator cy-id="explicitIndicator" v-if="isExplicit" />
         </ui-tooltip>
       </div>
@@ -138,7 +138,7 @@
       <p cy-id="line2" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displayLineTwo || '&nbsp;' }}</p>
       <p cy-id="line3" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
-  </div>
+  </article>
 </template>
 
 <script>

client/components/cards/LazyCollectionCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`collection-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`collection-card-${index}`" role="button" :style="{ width: cardWidth + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div class="relative" :style="{ height: coverHeight + 'px' }">
       <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
       <div class="w-full h-full bg-primary relative rounded overflow-hidden">

client/components/cards/LazyPlaylistCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`playlist-card-${index}`" role="button" :style="{ width: cardWidth + 'px', fontSize: sizeMultiplier + 'rem' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div class="relative" :style="{ height: coverHeight + 'px' }">
       <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
       <div class="w-full h-full bg-primary relative rounded overflow-hidden">

client/components/cards/LazySeriesCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div cy-id="card" ref="card" :id="`series-card-${index}`" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <article cy-id="card" ref="card" :id="`series-card-${index}`" tabindex="0" :aria-label="displayTitle" :style="{ width: cardWidth + 'px' }" class="absolute rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div cy-id="covers-area" class="relative" :style="{ height: coverHeight + 'px' }">
       <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
       <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
@@ -7,12 +7,12 @@
       </div>
 
       <div cy-id="seriesLengthMarker" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `0.1em 0.25em` }" style="background-color: #cd9d49dd">
-        <p :style="{ fontSize: 0.8 + 'em' }">{{ books.length }}</p>
+        <p :style="{ fontSize: 0.8 + 'em' }" role="status" :aria-label="$strings.LabelNumberOfBooks">{{ books.length }}</p>
       </div>
 
       <div cy-id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1e shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
 
-      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
+      <div cy-id="hoveringDisplayTitle" v-if="hasValidCovers" aria-hidden="true" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: '1em' }">
         <p :style="{ fontSize: 1.2 + 'em' }">{{ displayTitle }}</p>
       </div>
 
@@ -21,14 +21,14 @@
 
     <div cy-id="standardBottomText" v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6e h-6e rounded-md text-center" :style="{ width: Math.min(200, cardWidth) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0em 0.5em` }">
-        <p cy-id="standardBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+        <p cy-id="standardBottomDisplayTitle" class="truncate" aria-hidden="true" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       </div>
     </div>
     <div cy-id="detailBottomText" v-else class="relative z-30 left-0 right-0 mx-auto py-1e rounded-md text-center">
-      <p cy-id="detailBottomDisplayTitle" class="truncate" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
+      <p cy-id="detailBottomDisplayTitle" class="truncate" aria-hidden="true" :style="{ fontSize: labelFontSize + 'em' }">{{ displayTitle }}</p>
       <p cy-id="detailBottomSortLine" v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 + 'em' }">{{ displaySortLine }}</p>
     </div>
-  </div>
+  </article>
 </template>
 
 <script>

client/components/controls/GlobalSearch.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="">
     <div class="w-full relative sm:w-80">
-      <form @submit.prevent="submitSearch">
+      <form role="search" @submit.prevent="submitSearch">
         <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
       </form>
-      <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
+      <button :aria-hidden="!search" class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
         <span v-if="!search" class="material-symbols" style="font-size: 1.2rem">&#xe8b6;</span>
         <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
-      </div>
+      </button>
     </div>
     <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full max-w-64 sm:max-w-80 sm:w-80 bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu" @mousedown.stop.prevent>
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">

client/components/controls/LibraryFilterSelect.vue

@@ -1,28 +1,30 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
-      <span class="flex items-center justify-between">
-        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-      </span>
+    <div class="relative h-7">
+      <button type="button" class="relative w-full h-full bg-bg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
+        <span class="flex items-center justify-between">
+          <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        </span>
+      </button>
       <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
         </svg>
       </span>
-      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+      <button v-else :aria-label="$strings.ButtonClearFilter" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-200" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
         <span class="material-symbols" style="font-size: 1.1rem">close</span>
-      </div>
-    </button>
+      </button>
+    </div>
 
     <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm libraryFilterMenu">
-      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+      <ul v-show="!sublist" class="h-full w-full" role="menu">
         <template v-for="item in selectItems">
-          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item)">
+          <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" :aria-haspopup="item.sublist ? '' : 'menu'" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
               <span class="font-normal ml-3 block truncate text-sm">{{ item.text }}</span>
             </div>
             <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-symbols text-2xl">arrow_right</span>
+              <span class="material-symbols text-2xl" :aria-label="$strings.LabelMore">arrow_right</span>
             </div>
             <!-- selected checkmark icon -->
             <div v-if="item.value === selected" class="absolute inset-y-0 right-2 h-full flex items-center pointer-events-none">
@@ -31,8 +33,8 @@
           </li>
         </template>
       </ul>
-      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="option" @click="sublist = null">
+      <ul v-show="sublist" class="h-full w-full" role="menu">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-white/5" role="menuitem" @click="sublist = null">
           <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
             <span class="material-symbols text-2xl">arrow_left</span>
           </div>
@@ -40,13 +42,13 @@
             <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
           </div>
         </li>
-        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
+        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="menuitem">
           <div class="flex items-center justify-center">
             <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
           </div>
         </li>
         <template v-for="item in sublistItems">
-          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedSublistOption(item.value)">
+          <li :key="item.value" class="select-none relative px-2 cursor-pointer hover:bg-white/5" :class="`${sublist}.${item.value}` === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedSublistOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
             </div>

client/components/controls/LibrarySortSelect.vue

@@ -1,20 +1,20 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-symbols text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="material-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="menu">
       <template v-for="item in selectItems">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
           <div class="flex items-center">
             <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            <span class="material-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
           </span>
         </li>
       </template>

client/components/controls/SortSelect.vue

@@ -1,20 +1,20 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none cursor-pointer" aria-haspopup="menu" :aria-expanded="showMenu" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-symbols text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="material-symbols text-lg text-yellow-400" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="menu">
       <template v-for="item in items">
-        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="option" @click="clickedOption(item.value)">
+        <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
           <div class="flex items-center">
             <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
           </div>
           <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-            <span class="material-symbols text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+            <span class="material-symbols text-xl" :aria-label="descending ? $strings.LabelSortDescending : $strings.LabelSortAscending">{{ descending ? 'expand_more' : 'expand_less' }}</span>
           </span>
         </li>
       </template>

client/components/covers/GroupCover.vue

@@ -121,6 +121,8 @@ export default {
 
       var img = document.createElement('img')
       img.src = src
+      img.alt = `${this.name}, ${this.$strings.LabelCover}`
+      img.ariaHidden = true
       img.className = 'absolute top-0 left-0 w-full h-full'
       img.style.objectFit = showCoverBg ? 'contain' : 'cover'
 

client/components/modals/Modal.vue

@@ -1,12 +1,12 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
+  <div ref="wrapper" role="dialog" aria-modal="true" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <button class="absolute top-4 right-4 landscape:top-4 landscape:right-4 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 inline-flex text-gray-200 hover:text-white" aria-label="Close modal" @click="clickClose">
       <span class="material-symbols text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
     </button>
     <slot name="outer" />
-    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" aria-modal="true" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
+    <div ref="content" tabindex="0" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white outline-none" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />
@@ -126,6 +126,9 @@ export default {
 
       this.$eventBus.$on('modal-hotkey', this.hotkey)
       this.$store.commit('setOpenModal', this.name)
+
+      // Set focus to the modal content
+      this.content.focus()
     },
     setHide() {
       if (this.content) this.content.style.transform = 'scale(0)'

client/components/modals/changelog/ViewModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="changelog" :width="800" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="text-3xl text-white truncate">Changelog</p>
+        <h1 class="text-3xl text-white truncate">Changelog</h1>
       </div>
     </template>
     <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
@@ -13,7 +13,7 @@
           </p>
           <div class="custom-text" v-html="getChangelog(release)" />
         </div>
-        <div v-if="release !== releasesToShow[releasesToShow.length - 1]" class="border-b border-black-300 my-8" />
+        <div v-if="release !== releasesToShow[releasesToShow.length - 1]" :key="`${release.name}-divider`" class="border-b border-black-300 my-8" />
       </template>
     </div>
   </modals-modal>

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -10,9 +10,9 @@
         <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</p>
 
         <div class="w-full relative">
-          <ui-text-input v-model="currentFeed.feedUrl" readonly />
+          <ui-text-input :value="feedUrl" readonly />
 
-          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeed.feedUrl)">content_copy</span>
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feedUrl)">content_copy</span>
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">
@@ -111,8 +111,11 @@ export default {
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
+    feedUrl() {
+      return this.currentFeed ? `${window.origin}${this.$config.routerBasePath}${this.currentFeed.feedUrl}` : ''
+    },
     demoFeedUrl() {
-      return `${window.origin}/feed/${this.newFeedSlug}`
+      return `${window.origin}${this.$config.routerBasePath}/feed/${this.newFeedSlug}`
     },
     isHttp() {
       return window.origin.startsWith('http://')

client/components/modals/rssfeed/ViewFeedModal.vue

@@ -5,8 +5,8 @@
         <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedGeneral }}</p>
 
         <div class="w-full relative">
-          <ui-text-input v-model="feed.feedUrl" readonly />
-          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feed.feedUrl)">content_copy</span>
+          <ui-text-input :value="feedUrl" readonly />
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(feedUrl)">content_copy</span>
         </div>
 
         <div v-if="feed.meta" class="mt-5">
@@ -70,6 +70,9 @@ export default {
     },
     _feed() {
       return this.feed || {}
+    },
+    feedUrl() {
+      return this.feed ? `${window.origin}${this.$config.routerBasePath}${this.feed.feedUrl}` : ''
     }
   },
   methods: {

client/components/ui/ContextMenuDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
     <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu" :processing="processing">
-      <button v-if="!processing" type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+      <button v-if="!processing" type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" :aria-label="$strings.LabelMore" aria-haspopup="menu" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
         <span class="material-symbols text-2xl" :class="iconClass">&#xe5d4;</span>
       </button>
       <div v-else class="h-full w-full flex items-center justify-center">
@@ -10,12 +10,12 @@
     </slot>
 
     <transition name="menu">
-      <div v-show="showMenu" ref="menuWrapper" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth + 'px' }">
+      <div v-show="showMenu" ref="menuWrapper" role="menu" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth + 'px' }">
         <template v-for="(item, index) in items">
           <template v-if="item.subitems">
-            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
+            <button :key="index" role="menuitem" aria-haspopup="menu" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-default w-full" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
               <p>{{ item.text }}</p>
-            </div>
+            </button>
             <div
               v-if="mouseoverItemIndex === index"
               :key="`subitems-${index}`"
@@ -25,14 +25,14 @@
               :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'"
               :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }"
             >
-              <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.action, subitem.data)">
+              <button v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" role="menuitem" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer w-full" @click.stop="clickAction(subitem.action, subitem.data)">
                 <p>{{ subitem.text }}</p>
-              </div>
+              </button>
             </div>
           </template>
-          <div v-else :key="index" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
+          <button v-else :key="index" role="menuitem" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer w-full" @click.stop="clickAction(item.action)">
             <p class="text-left">{{ item.text }}</p>
-          </div>
+          </button>
         </template>
       </div>
     </transition>

client/components/ui/IconBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
+  <button :aria-label="ariaLabel" class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
@@ -28,7 +28,8 @@ export default {
     size: {
       type: Number,
       default: 9
-    }
+    },
+    ariaLabel: String
   },
   data() {
     return {}

client/components/ui/LibrariesDropdown.vue

@@ -4,7 +4,7 @@
       type="button"
       :disabled="disabled"
       class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200"
-      aria-haspopup="listbox"
+      aria-haspopup="menu"
       :aria-expanded="showMenu"
       :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name"
       @click.stop.prevent="clickShowMenu"
@@ -16,9 +16,9 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full min-w-48 bg-primary border border-black-200 shadow-lg rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm librariesDropdownMenu" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full min-w-48 bg-primary border border-black-200 shadow-lg rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm librariesDropdownMenu" tabindex="-1" role="menu">
         <template v-for="library in librariesFiltered">
-          <li :key="library.id" class="text-gray-400 hover:text-white relative py-2 cursor-pointer hover:bg-black-400" role="option" tabindex="0" @keydown.enter="selectLibrary(library)" @click="selectLibrary(library)">
+          <li :key="library.id" class="text-gray-400 hover:text-white relative py-2 cursor-pointer hover:bg-black-400" role="menuitem" tabindex="0" @keydown.enter="selectLibrary(library)" @click="selectLibrary(library)">
             <div class="flex items-center px-2">
               <ui-library-icon :icon="library.icon" class="mr-1.5" />
               <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>

client/components/ui/ReadIconBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" :class="borderless ? '' : 'bg-primary border border-gray-600'" @click="clickBtn">
+  <button :aria-label="isRead ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" :class="borderless ? '' : 'bg-primary border border-gray-600'" @click="clickBtn">
     <div class="w-5 h-5 text-white relative">
       <svg v-if="isRead" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
         <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />

client/components/widgets/CoverSizeWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
+    <div aria-hidden="true" class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
       <span class="material-symbols" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">&#xe15b;</span>
       <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
       <span class="material-symbols" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">&#xe145;</span>

client/components/widgets/ItemSlider.vue

@@ -3,10 +3,10 @@
     <div class="flex items-center py-3e">
       <slot />
       <div class="flex-grow" />
-      <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
+      <button cy-id="leftScrollButton" v-if="isScrollable" :aria-label="$strings.ButtonScrollLeft" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
         <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
       </button>
-      <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
+      <button cy-id="rightScrollButton" v-if="isScrollable" :aria-label="$strings.ButtonScrollRight" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
         <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
       </button>
     </div>

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.17.4",
+  "version": "2.17.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf-client",
-      "version": "2.17.4",
+      "version": "2.17.5",
       "license": "ISC",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.17.4",
+  "version": "2.17.5",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",

client/pages/config/index.vue

@@ -42,11 +42,6 @@
             </div>
           </div>
 
-          <div class="flex items-center py-2 mb-2">
-            <ui-toggle-switch labeledBy="settings-chromecast-support" v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-            <p class="pl-4" id="settings-chromecast-support">{{ $strings.LabelSettingsChromecastSupport }}</p>
-          </div>
-
           <div class="pt-4">
             <h2 class="font-semibold">{{ $strings.HeaderSettingsScanner }}</h2>
           </div>
@@ -94,6 +89,20 @@
               </p>
             </ui-tooltip>
           </div>
+
+          <div class="pt-4">
+            <h2 class="font-semibold">{{ $strings.HeaderSettingsWebClient }}</h2>
+          </div>
+
+          <div class="flex items-center py-2">
+            <ui-toggle-switch labeledBy="settings-chromecast-support" v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
+            <p class="pl-4" id="settings-chromecast-support">{{ $strings.LabelSettingsChromecastSupport }}</p>
+          </div>
+
+          <div class="flex items-center py-2 mb-2">
+            <ui-toggle-switch labeledBy="settings-allow-iframe" v-model="newServerSettings.allowIframe" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('allowIframe', val)" />
+            <p class="pl-4" id="settings-allow-iframe">{{ $strings.LabelSettingsAllowIframe }}</p>
+          </div>
         </div>
 
         <div class="flex-1">
@@ -324,21 +333,21 @@ export default {
     },
     updateServerSettings(payload) {
       this.updatingServerSettings = true
-      this.$store
-        .dispatch('updateServerSettings', payload)
-        .then(() => {
-          this.updatingServerSettings = false
+      this.$store.dispatch('updateServerSettings', payload).then((response) => {
+        this.updatingServerSettings = false
 
-          if (payload.language) {
-            // Updating language after save allows for re-rendering
-            this.$setLanguageCode(payload.language)
-          }
-        })
-        .catch((error) => {
-          console.error('Failed to update server settings', error)
-          this.updatingServerSettings = false
-          this.$toast.error(this.$strings.ToastFailedToUpdate)
-        })
+        if (response.error) {
+          console.error('Failed to update server settins', response.error)
+          this.$toast.error(response.error)
+          this.initServerSettings()
+          return
+        }
+
+        if (payload.language) {
+          // Updating language after save allows for re-rendering
+          this.$setLanguageCode(payload.language)
+        }
+      })
     },
     initServerSettings() {
       this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}

client/pages/config/rss-feeds.vue

@@ -126,7 +126,7 @@ export default {
     },
     coverUrl(feed) {
       if (!feed.coverPath) return `${this.$config.routerBasePath}/Logo.png`
-      return `${feed.feedUrl}/cover`
+      return `${this.$config.routerBasePath}${feed.feedUrl}/cover`
     },
     async loadFeeds() {
       const data = await this.$axios.$get(`/api/feeds`).catch((err) => {

client/pages/item/_id/index.vue

@@ -12,12 +12,12 @@
             <!-- Item Cover Overlay -->
             <div class="absolute top-0 left-0 w-full h-full z-10 opacity-0 group-hover:opacity-100 pointer-events-none">
               <div v-show="showPlayButton && !isStreaming" class="h-full flex items-center justify-center pointer-events-none">
-                <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto cursor-pointer" @click.stop.prevent="playItem">
+                <button class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto cursor-pointer" :aria-label="$strings.ButtonPlay" @click.stop.prevent="playItem">
                   <span class="material-symbols fill text-4xl">play_arrow</span>
-                </div>
+                </button>
               </div>
 
-              <span class="absolute bottom-2.5 right-2.5 z-10 material-symbols text-lg cursor-pointer text-white text-opacity-75 hover:text-opacity-100 hover:scale-110 transform duration-200 pointer-events-auto" @click="showEditCover">edit</span>
+              <button class="absolute bottom-2.5 right-2.5 z-10 material-symbols text-lg cursor-pointer text-white text-opacity-75 hover:text-opacity-100 hover:scale-110 transform duration-200 pointer-events-auto" :aria-label="$strings.ButtonEdit" @click="showEditCover">edit</button>
             </div>
           </div>
         </div>
@@ -87,7 +87,7 @@
             </ui-btn>
 
             <ui-btn v-else-if="isMissing || isInvalid" color="error" :padding-x="4" small class="flex items-center h-9 mr-2">
-              <span v-show="!isStreaming" class="material-symbols text-2xl -ml-2 pr-1 text-white">error</span>
+              <span class="material-symbols text-2xl -ml-2 pr-1 text-white">error</span>
               {{ isMissing ? $strings.LabelMissing : $strings.LabelIncomplete }}
             </ui-btn>
 
@@ -96,12 +96,12 @@
             </ui-tooltip>
 
             <ui-btn v-if="showReadButton" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
-              <span class="material-symbols text-2xl -ml-2 pr-2 text-white">auto_stories</span>
+              <span class="material-symbols text-2xl -ml-2 pr-2 text-white" aria-hidden="true">auto_stories</span>
               {{ $strings.ButtonRead }}
             </ui-btn>
 
             <ui-tooltip v-if="userCanUpdate" :text="$strings.LabelEdit" direction="top">
-              <ui-icon-btn icon="&#xe3c9;" outlined class="mx-0.5" @click="editClick" />
+              <ui-icon-btn icon="&#xe3c9;" outlined class="mx-0.5" :aria-label="$strings.LabelEdit" @click="editClick" />
             </ui-tooltip>
 
             <ui-tooltip v-if="!isPodcast" :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
@@ -110,12 +110,12 @@
 
             <!-- Only admin or root user can download new episodes -->
             <ui-tooltip v-if="isPodcast && userIsAdminOrUp" :text="$strings.LabelFindEpisodes" direction="top">
-              <ui-icon-btn icon="search" class="mx-0.5" :loading="fetchingRSSFeed" outlined @click="findEpisodesClick" />
+              <ui-icon-btn icon="search" class="mx-0.5" :aria-label="$strings.LabelFindEpisodes" :loading="fetchingRSSFeed" outlined @click="findEpisodesClick" />
             </ui-tooltip>
 
             <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="148" @action="contextMenuAction">
               <template #default="{ showMenu, clickShowMenu, disabled }">
-                <button type="button" :disabled="disabled" class="mx-0.5 icon-btn bg-primary border border-gray-600 w-9 h-9 rounded-md flex items-center justify-center relative" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+                <button type="button" :disabled="disabled" class="mx-0.5 icon-btn bg-primary border border-gray-600 w-9 h-9 rounded-md flex items-center justify-center relative" aria-haspopup="listbox" :aria-expanded="showMenu" :aria-label="$strings.LabelMore" @click.stop.prevent="clickShowMenu">
                   <span class="material-symbols text-2xl">&#xe5d3;</span>
                 </button>
               </template>

client/plugins/i18n.js

@@ -7,6 +7,7 @@ const defaultCode = 'en-us'
 const languageCodeMap = {
   bg: { label: 'Български', dateFnsLocale: 'bg' },
   bn: { label: 'বাংলা', dateFnsLocale: 'bn' },
+  ca: { label: 'Català', dateFnsLocale: 'ca' },
   cs: { label: 'Čeština', dateFnsLocale: 'cs' },
   da: { label: 'Dansk', dateFnsLocale: 'da' },
   de: { label: 'Deutsch', dateFnsLocale: 'de' },

client/store/index.js

@@ -72,16 +72,17 @@ export const actions = {
     return this.$axios
       .$patch('/api/settings', updatePayload)
       .then((result) => {
-        if (result.success) {
+        if (result.serverSettings) {
           commit('setServerSettings', result.serverSettings)
-          return true
-        } else {
-          return false
         }
+        return result
       })
       .catch((error) => {
         console.error('Failed to update server settings', error)
-        return false
+        const errorMsg = error.response?.data || 'Unknown error'
+        return {
+          error: errorMsg
+        }
       })
   },
   checkForUpdate({ commit }) {

client/strings/de.json

@@ -679,6 +679,8 @@
   "LabelViewPlayerSettings": "Zeige player Einstellungen",
   "LabelViewQueue": "Player-Warteschlange anzeigen",
   "LabelVolume": "Lautstärke",
+  "LabelWebRedirectURLsDescription": "Autorisieren Sie diese URLs bei ihrem OAuth-Anbieter, um die Weiterleitung zurück zur Webanwendung nach dem Login zu ermöglichen:",
+  "LabelWebRedirectURLsSubfolder": "Unterordner für Weiterleitung-URLs",
   "LabelWeekdaysToRun": "Wochentage für die Ausführung",
   "LabelXBooks": "{0} Bücher",
   "LabelXItems": "{0} Medien",

client/strings/en-us.json

@@ -88,6 +88,8 @@
   "ButtonSaveTracklist": "Save Tracklist",
   "ButtonScan": "Scan",
   "ButtonScanLibrary": "Scan Library",
+  "ButtonScrollLeft": "Scroll Left",
+  "ButtonScrollRight": "Scroll Right",
   "ButtonSearch": "Search",
   "ButtonSelectFolderPath": "Select Folder Path",
   "ButtonSeries": "Series",
@@ -190,6 +192,7 @@
   "HeaderSettingsExperimental": "Experimental Features",
   "HeaderSettingsGeneral": "General",
   "HeaderSettingsScanner": "Scanner",
+  "HeaderSettingsWebClient": "Web Client",
   "HeaderSleepTimer": "Sleep Timer",
   "HeaderStatsLargestItems": "Largest Items",
   "HeaderStatsLongestItems": "Longest Items (hrs)",
@@ -542,6 +545,7 @@
   "LabelServerYearReview": "Server Year in Review ({0})",
   "LabelSetEbookAsPrimary": "Set as primary",
   "LabelSetEbookAsSupplementary": "Set as supplementary",
+  "LabelSettingsAllowIframe": "Allow embedding in an iframe",
   "LabelSettingsAudiobooksOnly": "Audiobooks only",
   "LabelSettingsAudiobooksOnlyHelp": "Enabling this setting will ignore ebook files unless they are inside an audiobook folder in which case they will be set as supplementary ebooks",
   "LabelSettingsBookshelfViewHelp": "Skeumorphic design with wooden shelves",
@@ -592,6 +596,8 @@
   "LabelSize": "Size",
   "LabelSleepTimer": "Sleep timer",
   "LabelSlug": "Slug",
+  "LabelSortAscending": "Ascending",
+  "LabelSortDescending": "Descending",
   "LabelStart": "Start",
   "LabelStartTime": "Start Time",
   "LabelStarted": "Started",

client/strings/sl.json

@@ -679,6 +679,8 @@
   "LabelViewPlayerSettings": "Ogled nastavitev predvajalnika",
   "LabelViewQueue": "Ogled čakalno vrsto predvajalnika",
   "LabelVolume": "Glasnost",
+  "LabelWebRedirectURLsDescription": "Avtorizirajte URL-je pri svojem ponudniku OAuth ter s tem omogočite preusmeritev nazaj v spletno aplikacijo po prijavi:",
+  "LabelWebRedirectURLsSubfolder": "Podmapa za URL-je preusmeritve",
   "LabelWeekdaysToRun": "Delovni dnevi predvajanja",
   "LabelXBooks": "{0} knjig",
   "LabelXItems": "{0} elementov",

client/strings/uk.json

@@ -679,6 +679,8 @@
   "LabelViewPlayerSettings": "Переглянути налаштування програвача",
   "LabelViewQueue": "Переглянути чергу відтворення",
   "LabelVolume": "Гучність",
+  "LabelWebRedirectURLsDescription": "Авторизуйте ці URL у вашому OAuth постачальнику, щоб дозволити редирекцію назад до веб-додатку після входу:",
+  "LabelWebRedirectURLsSubfolder": "Підпапка для Redirect URL",
   "LabelWeekdaysToRun": "Виконувати у дні",
   "LabelXBooks": "{0} книг",
   "LabelXItems": "{0} елементів",

index.js

@@ -11,6 +11,7 @@ if (isDev) {
   if (devEnv.FFProbePath) process.env.FFPROBE_PATH = devEnv.FFProbePath
   if (devEnv.NunicodePath) process.env.NUSQLITE3_PATH = devEnv.NunicodePath
   if (devEnv.SkipBinariesCheck) process.env.SKIP_BINARIES_CHECK = '1'
+  if (devEnv.AllowIframe) process.env.ALLOW_IFRAME = '1'
   if (devEnv.BackupPath) process.env.BACKUP_PATH = devEnv.BackupPath
   process.env.SOURCE = 'local'
   process.env.ROUTER_BASE_PATH = devEnv.RouterBasePath || ''

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf",
-  "version": "2.17.4",
+  "version": "2.17.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf",
-      "version": "2.17.4",
+      "version": "2.17.5",
       "license": "GPL-3.0",
       "dependencies": {
         "axios": "^0.27.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "2.17.4",
+  "version": "2.17.5",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast server",
   "main": "index.js",

server/Server.js

@@ -194,8 +194,10 @@ class Server {
     const app = express()
 
     app.use((req, res, next) => {
-      // Prevent clickjacking by disallowing iframes
-      res.setHeader('Content-Security-Policy', "frame-ancestors 'self'")
+      if (!global.ServerSettings.allowIframe) {
+        // Prevent clickjacking by disallowing iframes
+        res.setHeader('Content-Security-Policy', "frame-ancestors 'self'")
+      }
 
       /**
        * @temporary
@@ -248,14 +250,17 @@ class Server {
 
     const router = express.Router()
     // if RouterBasePath is set, modify all requests to include the base path
-    if (global.RouterBasePath) {
-      app.use((req, res, next) => {
-        if (!req.url.startsWith(global.RouterBasePath)) {
-          req.url = `${global.RouterBasePath}${req.url}`
-        }
-        next()
-      })
-    }
+    app.use((req, res, next) => {
+      const urlStartsWithRouterBasePath = req.url.startsWith(global.RouterBasePath)
+      const host = req.get('host')
+      const protocol = req.secure || req.get('x-forwarded-proto') === 'https' ? 'https' : 'http'
+      const prefix = urlStartsWithRouterBasePath ? global.RouterBasePath : ''
+      req.originalHostPrefix = `${protocol}://${host}${prefix}`
+      if (!urlStartsWithRouterBasePath) {
+        req.url = `${global.RouterBasePath}${req.url}`
+      }
+      next()
+    })
     app.use(global.RouterBasePath, router)
     app.disable('x-powered-by')
 

server/controllers/MiscController.js

@@ -126,6 +126,10 @@ class MiscController {
     if (!isObject(settingsUpdate)) {
       return res.status(400).send('Invalid settings update object')
     }
+    if (settingsUpdate.allowIframe == false && process.env.ALLOW_IFRAME === '1') {
+      Logger.warn('Cannot disable iframe when ALLOW_IFRAME is enabled in environment')
+      return res.status(400).send('Cannot disable iframe when ALLOW_IFRAME is enabled in environment')
+    }
 
     const madeUpdates = Database.serverSettings.update(settingsUpdate)
     if (madeUpdates) {
@@ -137,7 +141,6 @@ class MiscController {
       }
     }
     return res.json({
-      success: true,
       serverSettings: Database.serverSettings.toJSONForBrowser()
     })
   }

server/controllers/RSSFeedController.js

@@ -38,38 +38,43 @@ class RSSFeedController {
    * @param {Response} res
    */
   async openRSSFeedForItem(req, res) {
-    const options = req.body || {}
+    const reqBody = req.body || {}
 
-    const item = await Database.libraryItemModel.getOldById(req.params.itemId)
-    if (!item) return res.sendStatus(404)
+    const itemExpanded = await Database.libraryItemModel.getExpandedById(req.params.itemId)
+    if (!itemExpanded) return res.sendStatus(404)
 
     // Check user can access this library item
-    if (!req.user.checkCanAccessLibraryItem(item)) {
-      Logger.error(`[RSSFeedController] User "${req.user.username}" attempted to open an RSS feed for item "${item.media.metadata.title}" that they don\'t have access to`)
+    if (!req.user.checkCanAccessLibraryItem(itemExpanded)) {
+      Logger.error(`[RSSFeedController] User "${req.user.username}" attempted to open an RSS feed for item "${itemExpanded.media.title}" that they don\'t have access to`)
       return res.sendStatus(403)
     }
 
     // Check request body options exist
-    if (!options.serverAddress || !options.slug) {
+    if (!reqBody.serverAddress || !reqBody.slug || typeof reqBody.serverAddress !== 'string' || typeof reqBody.slug !== 'string') {
       Logger.error(`[RSSFeedController] Invalid request body to open RSS feed`)
       return res.status(400).send('Invalid request body')
     }
 
     // Check item has audio tracks
-    if (!item.media.numTracks) {
-      Logger.error(`[RSSFeedController] Cannot open RSS feed for item "${item.media.metadata.title}" because it has no audio tracks`)
+    if (!itemExpanded.hasAudioTracks()) {
+      Logger.error(`[RSSFeedController] Cannot open RSS feed for item "${itemExpanded.media.title}" because it has no audio tracks`)
       return res.status(400).send('Item has no audio tracks')
     }
 
     // Check that this slug is not being used for another feed (slug will also be the Feed id)
-    if (await this.rssFeedManager.findFeedBySlug(options.slug)) {
-      Logger.error(`[RSSFeedController] Cannot open RSS feed because slug "${options.slug}" is already in use`)
+    if (await this.rssFeedManager.findFeedBySlug(reqBody.slug)) {
+      Logger.error(`[RSSFeedController] Cannot open RSS feed because slug "${reqBody.slug}" is already in use`)
       return res.status(400).send('Slug already in use')
     }
 
-    const feed = await this.rssFeedManager.openFeedForItem(req.user.id, item, req.body)
+    const feed = await this.rssFeedManager.openFeedForItem(req.user.id, itemExpanded, reqBody)
+    if (!feed) {
+      Logger.error(`[RSSFeedController] Failed to open RSS feed for item "${itemExpanded.media.title}"`)
+      return res.status(500).send('Failed to open RSS feed')
+    }
+
     res.json({
-      feed: feed.toJSONMinified()
+      feed: feed.toOldJSONMinified()
     })
   }
 

server/managers/CoverManager.js

@@ -12,7 +12,7 @@ const parseEbookMetadata = require('../utils/parsers/parseEbookMetadata')
 const CacheManager = require('../managers/CacheManager')
 
 class CoverManager {
-  constructor() { }
+  constructor() {}
 
   getCoverDirectory(libraryItem) {
     if (global.ServerSettings.storeCoverWithItem && !libraryItem.isFile) {
@@ -93,10 +93,13 @@ class CoverManager {
     const coverFullPath = Path.posix.join(coverDirPath, `cover${extname}`)
 
     // Move cover from temp upload dir to destination
-    const success = await coverFile.mv(coverFullPath).then(() => true).catch((error) => {
-      Logger.error('[CoverManager] Failed to move cover file', path, error)
-      return false
-    })
+    const success = await coverFile
+      .mv(coverFullPath)
+      .then(() => true)
+      .catch((error) => {
+        Logger.error('[CoverManager] Failed to move cover file', coverFullPath, error)
+        return false
+      })
 
     if (!success) {
       return {
@@ -124,11 +127,13 @@ class CoverManager {
       var temppath = Path.posix.join(coverDirPath, 'cover')
 
       let errorMsg = ''
-      let success = await downloadImageFile(url, temppath).then(() => true).catch((err) => {
-        errorMsg = err.message || 'Unknown error'
-        Logger.error(`[CoverManager] Download image file failed for "${url}"`, errorMsg)
-        return false
-      })
+      let success = await downloadImageFile(url, temppath)
+        .then(() => true)
+        .catch((err) => {
+          errorMsg = err.message || 'Unknown error'
+          Logger.error(`[CoverManager] Download image file failed for "${url}"`, errorMsg)
+          return false
+        })
       if (!success) {
         return {
           error: 'Failed to download image from url: ' + errorMsg
@@ -180,7 +185,7 @@ class CoverManager {
     }
 
     // Cover path does not exist
-    if (!await fs.pathExists(coverPath)) {
+    if (!(await fs.pathExists(coverPath))) {
       Logger.error(`[CoverManager] validate cover path does not exist "${coverPath}"`)
       return {
         error: 'Cover path does not exist'
@@ -188,7 +193,7 @@ class CoverManager {
     }
 
     // Cover path is not a file
-    if (!await checkPathIsFile(coverPath)) {
+    if (!(await checkPathIsFile(coverPath))) {
       Logger.error(`[CoverManager] validate cover path is not a file "${coverPath}"`)
       return {
         error: 'Cover path is not a file'
@@ -211,10 +216,13 @@ class CoverManager {
       var newCoverPath = Path.posix.join(coverDirPath, coverFilename)
       Logger.debug(`[CoverManager] validate cover path copy cover from "${coverPath}" to "${newCoverPath}"`)
 
-      var copySuccess = await fs.copy(coverPath, newCoverPath, { overwrite: true }).then(() => true).catch((error) => {
-        Logger.error(`[CoverManager] validate cover path failed to copy cover`, error)
-        return false
-      })
+      var copySuccess = await fs
+        .copy(coverPath, newCoverPath, { overwrite: true })
+        .then(() => true)
+        .catch((error) => {
+          Logger.error(`[CoverManager] validate cover path failed to copy cover`, error)
+          return false
+        })
       if (!copySuccess) {
         return {
           error: 'Failed to copy cover to dir'
@@ -236,14 +244,14 @@ class CoverManager {
 
   /**
    * Extract cover art from audio file and save for library item
-   * 
-   * @param {import('../models/Book').AudioFileObject[]} audioFiles 
-   * @param {string} libraryItemId 
-   * @param {string} [libraryItemPath] null for isFile library items 
+   *
+   * @param {import('../models/Book').AudioFileObject[]} audioFiles
+   * @param {string} libraryItemId
+   * @param {string} [libraryItemPath] null for isFile library items
    * @returns {Promise<string>} returns cover path
    */
   async saveEmbeddedCoverArt(audioFiles, libraryItemId, libraryItemPath) {
-    let audioFileWithCover = audioFiles.find(af => af.embeddedCoverArt)
+    let audioFileWithCover = audioFiles.find((af) => af.embeddedCoverArt)
     if (!audioFileWithCover) return null
 
     let coverDirPath = null
@@ -273,10 +281,10 @@ class CoverManager {
 
   /**
    * Extract cover art from ebook and save for library item
-   * 
-   * @param {import('../utils/parsers/parseEbookMetadata').EBookFileScanData} ebookFileScanData 
-   * @param {string} libraryItemId 
-   * @param {string} [libraryItemPath] null for isFile library items 
+   *
+   * @param {import('../utils/parsers/parseEbookMetadata').EBookFileScanData} ebookFileScanData
+   * @param {string} libraryItemId
+   * @param {string} [libraryItemPath] null for isFile library items
    * @returns {Promise<string>} returns cover path
    */
   async saveEbookCoverArt(ebookFileScanData, libraryItemId, libraryItemPath) {
@@ -310,9 +318,9 @@ class CoverManager {
   }
 
   /**
-   * 
-   * @param {string} url 
-   * @param {string} libraryItemId 
+   *
+   * @param {string} url
+   * @param {string} libraryItemId
    * @param {string} [libraryItemPath] null if library item isFile or is from adding new podcast
    * @returns {Promise<{error:string}|{cover:string}>}
    */
@@ -328,10 +336,12 @@ class CoverManager {
       await fs.ensureDir(coverDirPath)
 
       const temppath = Path.posix.join(coverDirPath, 'cover')
-      const success = await downloadImageFile(url, temppath).then(() => true).catch((err) => {
-        Logger.error(`[CoverManager] Download image file failed for "${url}"`, err)
-        return false
-      })
+      const success = await downloadImageFile(url, temppath)
+        .then(() => true)
+        .catch((err) => {
+          Logger.error(`[CoverManager] Download image file failed for "${url}"`, err)
+          return false
+        })
       if (!success) {
         return {
           error: 'Failed to download image from url'
@@ -361,4 +371,4 @@ class CoverManager {
     }
   }
 }
-module.exports = new CoverManager()
+module.exports = new CoverManager()

server/managers/PodcastManager.js

@@ -25,7 +25,9 @@ const LibraryItem = require('../objects/LibraryItem')
 
 class PodcastManager {
   constructor() {
+    /** @type {PodcastEpisodeDownload[]} */
     this.downloadQueue = []
+    /** @type {PodcastEpisodeDownload} */
     this.currentDownload = null
 
     this.failedCheckMap = {}
@@ -63,6 +65,11 @@ class PodcastManager {
     }
   }
 
+  /**
+   *
+   * @param {PodcastEpisodeDownload} podcastEpisodeDownload
+   * @returns
+   */
   async startPodcastEpisodeDownload(podcastEpisodeDownload) {
     if (this.currentDownload) {
       this.downloadQueue.push(podcastEpisodeDownload)
@@ -106,7 +113,7 @@ class PodcastManager {
     }
 
     let success = false
-    if (this.currentDownload.urlFileExtension === 'mp3') {
+    if (this.currentDownload.isMp3) {
       // Download episode and tag it
       success = await ffmpegHelpers.downloadPodcastEpisode(this.currentDownload).catch((error) => {
         Logger.error(`[PodcastManager] Podcast Episode download failed`, error)

server/managers/RssFeedManager.js

@@ -1,3 +1,4 @@
+const { Request, Response } = require('express')
 const Path = require('path')
 
 const Logger = require('../Logger')
@@ -77,6 +78,12 @@ class RssFeedManager {
     return Database.feedModel.findByPkOld(id)
   }
 
+  /**
+   * GET: /feed/:slug
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
   async getFeed(req, res) {
     const feed = await this.findFeedBySlug(req.params.slug)
     if (!feed) {
@@ -162,11 +169,17 @@ class RssFeedManager {
       }
     }
 
-    const xml = feed.buildXml()
+    const xml = feed.buildXml(req.originalHostPrefix)
     res.set('Content-Type', 'text/xml')
     res.send(xml)
   }
 
+  /**
+   * GET: /feed/:slug/item/:episodeId/*
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
   async getFeedItem(req, res) {
     const feed = await this.findFeedBySlug(req.params.slug)
     if (!feed) {
@@ -183,6 +196,12 @@ class RssFeedManager {
     res.sendFile(episodePath)
   }
 
+  /**
+   * GET: /feed/:slug/cover*
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
   async getFeedCover(req, res) {
     const feed = await this.findFeedBySlug(req.params.slug)
     if (!feed) {
@@ -204,25 +223,42 @@ class RssFeedManager {
 
   /**
    *
-   * @param {string} userId
-   * @param {*} libraryItem
    * @param {*} options
-   * @returns
+   * @returns {import('../models/Feed').FeedOptions}
+   */
+  getFeedOptionsFromReqOptions(options) {
+    const metadataDetails = options.metadataDetails || {}
+
+    if (metadataDetails.preventIndexing !== false) {
+      metadataDetails.preventIndexing = true
+    }
+
+    return {
+      preventIndexing: metadataDetails.preventIndexing,
+      ownerName: metadataDetails.ownerName && typeof metadataDetails.ownerName === 'string' ? metadataDetails.ownerName : null,
+      ownerEmail: metadataDetails.ownerEmail && typeof metadataDetails.ownerEmail === 'string' ? metadataDetails.ownerEmail : null
+    }
+  }
+
+  /**
+   *
+   * @param {string} userId
+   * @param {import('../models/LibraryItem')} libraryItem
+   * @param {*} options
+   * @returns {Promise<import('../models/Feed').FeedExpanded>}
    */
   async openFeedForItem(userId, libraryItem, options) {
     const serverAddress = options.serverAddress
     const slug = options.slug
-    const preventIndexing = options.metadataDetails?.preventIndexing ?? true
-    const ownerName = options.metadataDetails?.ownerName
-    const ownerEmail = options.metadataDetails?.ownerEmail
+    const feedOptions = this.getFeedOptionsFromReqOptions(options)
 
-    const feed = new Feed()
-    feed.setFromItem(userId, slug, libraryItem, serverAddress, preventIndexing, ownerName, ownerEmail)
-
-    Logger.info(`[RssFeedManager] Opened RSS feed "${feed.feedUrl}"`)
-    await Database.createFeed(feed)
-    SocketAuthority.emitter('rss_feed_open', feed.toJSONMinified())
-    return feed
+    Logger.info(`[RssFeedManager] Creating RSS feed for item ${libraryItem.id} "${libraryItem.media.title}"`)
+    const feedExpanded = await Database.feedModel.createFeedForLibraryItem(userId, libraryItem, slug, serverAddress, feedOptions)
+    if (feedExpanded) {
+      Logger.info(`[RssFeedManager] Opened RSS feed "${feedExpanded.feedURL}"`)
+      SocketAuthority.emitter('rss_feed_open', feedExpanded.toOldJSONMinified())
+    }
+    return feedExpanded
   }
 
   /**

server/migrations/changelog.md

@@ -10,3 +10,4 @@ Please add a record of every database migration that you create to this file. Th
 | v2.17.0        | v2.17.0-uuid-replacement                     | Changes the data type of columns with UUIDv4 to UUID matching the associated model                            |
 | v2.17.3        | v2.17.3-fk-constraints                       | Changes the foreign key constraints for tables due to sequelize bug dropping constraints in v2.17.0 migration |
 | v2.17.4        | v2.17.4-use-subfolder-for-oidc-redirect-uris | Save subfolder to OIDC redirect URIs to support existing installations                                        |
+| v2.17.5        | v2.17.5-remove-host-from-feed-urls           | removes the host (serverAddress) from URL columns in the feeds and feedEpisodes tables                        |

server/migrations/v2.17.5-remove-host-from-feed-urls.js

@@ -0,0 +1,74 @@
+/**
+ * @typedef MigrationContext
+ * @property {import('sequelize').QueryInterface} queryInterface - a suquelize QueryInterface object.
+ * @property {import('../Logger')} logger - a Logger object.
+ *
+ * @typedef MigrationOptions
+ * @property {MigrationContext} context - an object containing the migration context.
+ */
+
+const migrationVersion = '2.17.5'
+const migrationName = `${migrationVersion}-remove-host-from-feed-urls`
+const loggerPrefix = `[${migrationVersion} migration]`
+
+/**
+ * This upward migration removes the host (serverAddress) from URL columns in the feeds and feedEpisodes tables.
+ *
+ * @param {MigrationOptions} options - an object containing the migration context.
+ * @returns {Promise<void>} - A promise that resolves when the migration is complete.
+ */
+async function up({ context: { queryInterface, logger } }) {
+  // Upwards migration script
+  logger.info(`${loggerPrefix} UPGRADE BEGIN: ${migrationName}`)
+
+  logger.info(`${loggerPrefix} Removing serverAddress from Feeds table URLs`)
+  await queryInterface.sequelize.query(`
+    UPDATE Feeds
+    SET feedUrl = REPLACE(feedUrl, COALESCE(serverAddress, ''), ''),
+        imageUrl = REPLACE(imageUrl, COALESCE(serverAddress, ''), ''),
+        siteUrl = REPLACE(siteUrl, COALESCE(serverAddress, ''), '');
+  `)
+  logger.info(`${loggerPrefix} Removed serverAddress from Feeds table URLs`)
+
+  logger.info(`${loggerPrefix} Removing serverAddress from FeedEpisodes table URLs`)
+  await queryInterface.sequelize.query(`
+    UPDATE FeedEpisodes
+      SET siteUrl = REPLACE(siteUrl, (SELECT COALESCE(serverAddress, '') FROM Feeds WHERE Feeds.id = FeedEpisodes.feedId), ''),
+          enclosureUrl = REPLACE(enclosureUrl, (SELECT COALESCE(serverAddress, '') FROM Feeds WHERE Feeds.id = FeedEpisodes.feedId), '');
+  `)
+  logger.info(`${loggerPrefix} Removed serverAddress from FeedEpisodes table URLs`)
+
+  logger.info(`${loggerPrefix} UPGRADE END: ${migrationName}`)
+}
+
+/**
+ * This downward migration script adds the host (serverAddress) back to URL columns in the feeds and feedEpisodes tables.
+ *
+ * @param {MigrationOptions} options - an object containing the migration context.
+ * @returns {Promise<void>} - A promise that resolves when the migration is complete.
+ */
+async function down({ context: { queryInterface, logger } }) {
+  // Downward migration script
+  logger.info(`${loggerPrefix} DOWNGRADE BEGIN: ${migrationName}`)
+
+  logger.info(`${loggerPrefix} Adding serverAddress back to Feeds table URLs`)
+  await queryInterface.sequelize.query(`
+    UPDATE Feeds
+    SET feedUrl = COALESCE(serverAddress, '') || feedUrl,
+        imageUrl = COALESCE(serverAddress, '') || imageUrl,
+        siteUrl = COALESCE(serverAddress, '') || siteUrl;
+  `)
+  logger.info(`${loggerPrefix} Added serverAddress back to Feeds table URLs`)
+
+  logger.info(`${loggerPrefix} Adding serverAddress back to FeedEpisodes table URLs`)
+  await queryInterface.sequelize.query(`
+    UPDATE FeedEpisodes
+      SET siteUrl = (SELECT COALESCE(serverAddress, '') || FeedEpisodes.siteUrl FROM Feeds WHERE Feeds.id = FeedEpisodes.feedId),
+          enclosureUrl = (SELECT COALESCE(serverAddress, '') || FeedEpisodes.enclosureUrl FROM Feeds WHERE Feeds.id = FeedEpisodes.feedId);
+  `)
+  logger.info(`${loggerPrefix} Added serverAddress back to FeedEpisodes table URLs`)
+
+  logger.info(`${loggerPrefix} DOWNGRADE END: ${migrationName}`)
+}
+
+module.exports = { up, down }

server/models/Book.js

@@ -106,6 +106,9 @@ class Book extends Model {
     this.updatedAt
     /** @type {Date} */
     this.createdAt
+
+    /** @type {import('./Author')[]} - optional if expanded */
+    this.authors
   }
 
   static getOldBook(libraryItemExpanded) {
@@ -320,6 +323,32 @@ class Book extends Model {
       }
     )
   }
+
+  /**
+   * Comma separated array of author names
+   * Requires authors to be loaded
+   *
+   * @returns {string}
+   */
+  get authorName() {
+    if (this.authors === undefined) {
+      Logger.error(`[Book] authorName: Cannot get authorName because authors are not loaded`)
+      return ''
+    }
+    return this.authors.map((au) => au.name).join(', ')
+  }
+  get includedAudioFiles() {
+    return this.audioFiles.filter((af) => !af.exclude)
+  }
+  get trackList() {
+    let startOffset = 0
+    return this.includedAudioFiles.map((af) => {
+      const track = structuredClone(af)
+      track.startOffset = startOffset
+      startOffset += track.duration
+      return track
+    })
+  }
 }
 
 module.exports = Book

server/models/Feed.js

@@ -1,7 +1,22 @@
+const Path = require('path')
 const { DataTypes, Model } = require('sequelize')
 const oldFeed = require('../objects/Feed')
 const areEquivalent = require('../utils/areEquivalent')
 
+/**
+ * @typedef FeedOptions
+ * @property {boolean} preventIndexing
+ * @property {string} ownerName
+ * @property {string} ownerEmail
+ */
+
+/**
+ * @typedef FeedExpandedProperties
+ * @property {import('./FeedEpisode')} feedEpisodes
+ *
+ * @typedef {Feed & FeedExpandedProperties} FeedExpanded
+ */
+
 class Feed extends Model {
   constructor(values, options) {
     super(values, options)
@@ -50,6 +65,9 @@ class Feed extends Model {
     this.createdAt
     /** @type {Date} */
     this.updatedAt
+
+    /** @type {import('./FeedEpisode')[]} - only set if expanded */
+    this.feedEpisodes
   }
 
   static async getOldFeeds() {
@@ -67,7 +85,15 @@ class Feed extends Model {
    * @returns {oldFeed}
    */
   static getOldFeed(feedExpanded) {
-    const episodes = feedExpanded.feedEpisodes?.map((feedEpisode) => feedEpisode.getOldEpisode())
+    const episodes = feedExpanded.feedEpisodes?.map((feedEpisode) => feedEpisode.getOldEpisode()) || []
+
+    // Sort episodes by pubDate. Newest to oldest for episodic, oldest to newest for serial
+    if (feedExpanded.podcastType === 'episodic') {
+      episodes.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate))
+    } else {
+      episodes.sort((a, b) => new Date(a.pubDate) - new Date(b.pubDate))
+    }
+
     return new oldFeed({
       id: feedExpanded.id,
       slug: feedExpanded.slug,
@@ -92,7 +118,7 @@ class Feed extends Model {
       },
       serverAddress: feedExpanded.serverAddress,
       feedUrl: feedExpanded.feedURL,
-      episodes: episodes || [],
+      episodes,
       createdAt: feedExpanded.createdAt.valueOf(),
       updatedAt: feedExpanded.updatedAt.valueOf()
     })
@@ -250,10 +276,62 @@ class Feed extends Model {
     }
   }
 
-  getEntity(options) {
-    if (!this.entityType) return Promise.resolve(null)
-    const mixinMethodName = `get${this.sequelize.uppercaseFirst(this.entityType)}`
-    return this[mixinMethodName](options)
+  /**
+   *
+   * @param {string} userId
+   * @param {string} slug
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItem
+   * @param {string} serverAddress
+   * @param {FeedOptions} feedOptions
+   *
+   * @returns {Promise<FeedExpanded>}
+   */
+  static async createFeedForLibraryItem(userId, libraryItem, slug, serverAddress, feedOptions) {
+    const media = libraryItem.media
+
+    const feedObj = {
+      slug,
+      entityType: 'libraryItem',
+      entityId: libraryItem.id,
+      entityUpdatedAt: libraryItem.updatedAt,
+      serverAddress,
+      feedURL: `/feed/${slug}`,
+      imageURL: media.coverPath ? `/feed/${slug}/cover${Path.extname(media.coverPath)}` : `/Logo.png`,
+      siteURL: `/item/${libraryItem.id}`,
+      title: media.title,
+      description: media.description,
+      author: libraryItem.mediaType === 'podcast' ? media.author : media.authorName,
+      podcastType: libraryItem.mediaType === 'podcast' ? media.podcastType : 'serial',
+      language: media.language,
+      preventIndexing: feedOptions.preventIndexing,
+      ownerName: feedOptions.ownerName,
+      ownerEmail: feedOptions.ownerEmail,
+      explicit: media.explicit,
+      coverPath: media.coverPath,
+      userId
+    }
+
+    /** @type {typeof import('./FeedEpisode')} */
+    const feedEpisodeModel = this.sequelize.models.feedEpisode
+
+    const transaction = await this.sequelize.transaction()
+    try {
+      const feed = await this.create(feedObj, { transaction })
+
+      if (libraryItem.mediaType === 'podcast') {
+        feed.feedEpisodes = await feedEpisodeModel.createFromPodcastEpisodes(libraryItem, feed, slug, transaction)
+      } else {
+        feed.feedEpisodes = await feedEpisodeModel.createFromAudiobookTracks(libraryItem, feed, slug, transaction)
+      }
+
+      await transaction.commit()
+
+      return feed
+    } catch (error) {
+      Logger.error(`[Feed] Error creating feed for library item ${libraryItem.id}`, error)
+      await transaction.rollback()
+      return null
+    }
   }
 
   /**
@@ -369,6 +447,60 @@ class Feed extends Model {
       }
     })
   }
+
+  getEntity(options) {
+    if (!this.entityType) return Promise.resolve(null)
+    const mixinMethodName = `get${this.sequelize.uppercaseFirst(this.entityType)}`
+    return this[mixinMethodName](options)
+  }
+
+  toOldJSON() {
+    const episodes = this.feedEpisodes?.map((feedEpisode) => feedEpisode.getOldEpisode())
+    return {
+      id: this.id,
+      slug: this.slug,
+      userId: this.userId,
+      entityType: this.entityType,
+      entityId: this.entityId,
+      entityUpdatedAt: this.entityUpdatedAt?.valueOf() || null,
+      coverPath: this.coverPath || null,
+      meta: {
+        title: this.title,
+        description: this.description,
+        author: this.author,
+        imageUrl: this.imageURL,
+        feedUrl: this.feedURL,
+        link: this.siteURL,
+        explicit: this.explicit,
+        type: this.podcastType,
+        language: this.language,
+        preventIndexing: this.preventIndexing,
+        ownerName: this.ownerName,
+        ownerEmail: this.ownerEmail
+      },
+      serverAddress: this.serverAddress,
+      feedUrl: this.feedURL,
+      episodes: episodes || [],
+      createdAt: this.createdAt.valueOf(),
+      updatedAt: this.updatedAt.valueOf()
+    }
+  }
+
+  toOldJSONMinified() {
+    return {
+      id: this.id,
+      entityType: this.entityType,
+      entityId: this.entityId,
+      feedUrl: this.feedURL,
+      meta: {
+        title: this.title,
+        description: this.description,
+        preventIndexing: this.preventIndexing,
+        ownerName: this.ownerName,
+        ownerEmail: this.ownerEmail
+      }
+    }
+  }
 }
 
 module.exports = Feed

server/models/FeedEpisode.js

@@ -1,4 +1,8 @@
+const Path = require('path')
 const { DataTypes, Model } = require('sequelize')
+const uuidv4 = require('uuid').v4
+const Logger = require('../Logger')
+const date = require('../libs/dateAndTime')
 
 class FeedEpisode extends Model {
   constructor(values, options) {
@@ -40,29 +44,6 @@ class FeedEpisode extends Model {
     this.updatedAt
   }
 
-  getOldEpisode() {
-    const enclosure = {
-      url: this.enclosureURL,
-      size: this.enclosureSize,
-      type: this.enclosureType
-    }
-    return {
-      id: this.id,
-      title: this.title,
-      description: this.description,
-      enclosure,
-      pubDate: this.pubDate,
-      link: this.siteURL,
-      author: this.author,
-      explicit: this.explicit,
-      duration: this.duration,
-      season: this.season,
-      episode: this.episode,
-      episodeType: this.episodeType,
-      fullPath: this.filePath
-    }
-  }
-
   /**
    * Create feed episode from old model
    *
@@ -96,6 +77,144 @@ class FeedEpisode extends Model {
     }
   }
 
+  /**
+   *
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItemExpanded
+   * @param {import('./Feed')} feed
+   * @param {string} slug
+   * @param {import('./PodcastEpisode')} episode
+   */
+  static getFeedEpisodeObjFromPodcastEpisode(libraryItemExpanded, feed, slug, episode) {
+    return {
+      title: episode.title,
+      author: feed.author,
+      description: episode.description,
+      siteURL: feed.siteURL,
+      enclosureURL: `/feed/${slug}/item/${episode.id}/media${Path.extname(episode.audioFile.metadata.filename)}`,
+      enclosureType: episode.audioFile.mimeType,
+      enclosureSize: episode.audioFile.metadata.size,
+      pubDate: episode.pubDate,
+      season: episode.season,
+      episode: episode.episode,
+      episodeType: episode.episodeType,
+      duration: episode.audioFile.duration,
+      filePath: episode.audioFile.metadata.path,
+      explicit: libraryItemExpanded.media.explicit,
+      feedId: feed.id
+    }
+  }
+
+  /**
+   *
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItemExpanded
+   * @param {import('./Feed')} feed
+   * @param {string} slug
+   * @param {import('sequelize').Transaction} transaction
+   * @returns {Promise<FeedEpisode[]>}
+   */
+  static async createFromPodcastEpisodes(libraryItemExpanded, feed, slug, transaction) {
+    const feedEpisodeObjs = []
+
+    // Sort podcastEpisodes by pubDate. episodic is newest to oldest. serial is oldest to newest.
+    if (feed.podcastType === 'episodic') {
+      libraryItemExpanded.media.podcastEpisodes.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate))
+    } else {
+      libraryItemExpanded.media.podcastEpisodes.sort((a, b) => new Date(a.pubDate) - new Date(b.pubDate))
+    }
+
+    for (const episode of libraryItemExpanded.media.podcastEpisodes) {
+      feedEpisodeObjs.push(this.getFeedEpisodeObjFromPodcastEpisode(libraryItemExpanded, feed, slug, episode))
+    }
+    Logger.info(`[FeedEpisode] Creating ${feedEpisodeObjs.length} episodes for feed ${feed.id}`)
+    return this.bulkCreate(feedEpisodeObjs, { transaction })
+  }
+
+  /**
+   * If chapters for an audiobook match the audio tracks then use chapter titles instead of audio file names
+   *
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItemExpanded
+   * @returns {boolean}
+   */
+  static checkUseChapterTitlesForEpisodes(libraryItemExpanded) {
+    const tracks = libraryItemExpanded.media.trackList || []
+    const chapters = libraryItemExpanded.media.chapters || []
+    if (tracks.length !== chapters.length) return false
+    for (let i = 0; i < tracks.length; i++) {
+      if (Math.abs(chapters[i].start - tracks[i].startOffset) >= 1) {
+        return false
+      }
+    }
+    return true
+  }
+
+  /**
+   *
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItemExpanded
+   * @param {import('./Feed')} feed
+   * @param {string} slug
+   * @param {import('./Book').AudioFileObject} audioTrack
+   * @param {boolean} useChapterTitles
+   * @param {string} [pubDateOverride]
+   */
+  static getFeedEpisodeObjFromAudiobookTrack(libraryItemExpanded, feed, slug, audioTrack, useChapterTitles, pubDateOverride = null) {
+    // Example: <pubDate>Fri, 04 Feb 2015 00:00:00 GMT</pubDate>
+    let timeOffset = isNaN(audioTrack.index) ? 0 : Number(audioTrack.index) * 1000 // Offset pubdate to ensure correct order
+    let episodeId = uuidv4()
+
+    // e.g. Track 1 will have a pub date before Track 2
+    const audiobookPubDate = pubDateOverride || date.format(new Date(libraryItemExpanded.createdAt.valueOf() + timeOffset), 'ddd, DD MMM YYYY HH:mm:ss [GMT]')
+
+    const contentUrl = `/feed/${slug}/item/${episodeId}/media${Path.extname(audioTrack.metadata.filename)}`
+    const media = libraryItemExpanded.media
+
+    let title = audioTrack.title
+    if (media.trackList.length == 1) {
+      // If audiobook is a single file, use book title instead of chapter/file title
+      title = media.title
+    } else {
+      if (useChapterTitles) {
+        // If audio track start and chapter start are within 1 seconds of eachother then use the chapter title
+        const matchingChapter = media.chapters.find((ch) => Math.abs(ch.start - audioTrack.startOffset) < 1)
+        if (matchingChapter?.title) title = matchingChapter.title
+      }
+    }
+
+    return {
+      id: episodeId,
+      title,
+      author: feed.author,
+      description: media.description || '',
+      siteURL: feed.siteURL,
+      enclosureURL: contentUrl,
+      enclosureType: audioTrack.mimeType,
+      enclosureSize: audioTrack.metadata.size,
+      pubDate: audiobookPubDate,
+      duration: audioTrack.duration,
+      filePath: audioTrack.metadata.path,
+      explicit: media.explicit,
+      feedId: feed.id
+    }
+  }
+
+  /**
+   *
+   * @param {import('./LibraryItem').LibraryItemExpanded} libraryItemExpanded
+   * @param {import('./Feed')} feed
+   * @param {string} slug
+   * @param {import('sequelize').Transaction} transaction
+   * @returns {Promise<FeedEpisode[]>}
+   */
+  static async createFromAudiobookTracks(libraryItemExpanded, feed, slug, transaction) {
+    const useChapterTitles = this.checkUseChapterTitlesForEpisodes(libraryItemExpanded)
+
+    const feedEpisodeObjs = []
+    for (const track of libraryItemExpanded.media.trackList) {
+      feedEpisodeObjs.push(this.getFeedEpisodeObjFromAudiobookTrack(libraryItemExpanded, feed, slug, track, useChapterTitles))
+    }
+    Logger.info(`[FeedEpisode] Creating ${feedEpisodeObjs.length} episodes for feed ${feed.id}`)
+    return this.bulkCreate(feedEpisodeObjs, { transaction })
+  }
+
   /**
    * Initialize model
    * @param {import('../Database').sequelize} sequelize
@@ -136,6 +255,29 @@ class FeedEpisode extends Model {
     })
     FeedEpisode.belongsTo(feed)
   }
+
+  getOldEpisode() {
+    const enclosure = {
+      url: this.enclosureURL,
+      size: this.enclosureSize,
+      type: this.enclosureType
+    }
+    return {
+      id: this.id,
+      title: this.title,
+      description: this.description,
+      enclosure,
+      pubDate: this.pubDate,
+      link: this.siteURL,
+      author: this.author,
+      explicit: this.explicit,
+      duration: this.duration,
+      season: this.season,
+      episode: this.episode,
+      episodeType: this.episodeType,
+      fullPath: this.filePath
+    }
+  }
 }
 
 module.exports = FeedEpisode

server/models/LibraryItem.js

@@ -73,6 +73,9 @@ class LibraryItem extends Model {
     this.createdAt
     /** @type {Date} */
     this.updatedAt
+
+    /** @type {Book.BookExpanded|Podcast.PodcastExpanded} - only set when expanded */
+    this.media
   }
 
   /**
@@ -1124,6 +1127,24 @@ class LibraryItem extends Model {
       }
     })
   }
+
+  /**
+   * Check if book or podcast library item has audio tracks
+   * Requires expanded library item
+   *
+   * @returns {boolean}
+   */
+  hasAudioTracks() {
+    if (!this.media) {
+      Logger.error(`[LibraryItem] hasAudioTracks: Library item "${this.id}" does not have media`)
+      return false
+    }
+    if (this.mediaType === 'book') {
+      return this.media.audioFiles?.length > 0
+    } else {
+      return this.media.podcastEpisodes?.length > 0
+    }
+  }
 }
 
 module.exports = LibraryItem

server/objects/Feed.js

@@ -29,9 +29,6 @@ class Feed {
     this.createdAt = null
     this.updatedAt = null
 
-    // Cached xml
-    this.xml = null
-
     if (feed) {
       this.construct(feed)
     }
@@ -104,64 +101,6 @@ class Feed {
     return true
   }
 
-  setFromItem(userId, slug, libraryItem, serverAddress, preventIndexing = true, ownerName = null, ownerEmail = null) {
-    const media = libraryItem.media
-    const mediaMetadata = media.metadata
-    const isPodcast = libraryItem.mediaType === 'podcast'
-
-    const feedUrl = `${serverAddress}/feed/${slug}`
-    const author = isPodcast ? mediaMetadata.author : mediaMetadata.authorName
-
-    this.id = uuidv4()
-    this.slug = slug
-    this.userId = userId
-    this.entityType = 'libraryItem'
-    this.entityId = libraryItem.id
-    this.entityUpdatedAt = libraryItem.updatedAt
-    this.coverPath = media.coverPath || null
-    this.serverAddress = serverAddress
-    this.feedUrl = feedUrl
-
-    const coverFileExtension = this.coverPath ? Path.extname(media.coverPath) : null
-
-    this.meta = new FeedMeta()
-    this.meta.title = mediaMetadata.title
-    this.meta.description = mediaMetadata.description
-    this.meta.author = author
-    this.meta.imageUrl = media.coverPath ? `${serverAddress}/feed/${slug}/cover${coverFileExtension}` : `${serverAddress}/Logo.png`
-    this.meta.feedUrl = feedUrl
-    this.meta.link = `${serverAddress}/item/${libraryItem.id}`
-    this.meta.explicit = !!mediaMetadata.explicit
-    this.meta.type = mediaMetadata.type
-    this.meta.language = mediaMetadata.language
-    this.meta.preventIndexing = preventIndexing
-    this.meta.ownerName = ownerName
-    this.meta.ownerEmail = ownerEmail
-
-    this.episodes = []
-    if (isPodcast) {
-      // PODCAST EPISODES
-      media.episodes.forEach((episode) => {
-        if (episode.updatedAt > this.entityUpdatedAt) this.entityUpdatedAt = episode.updatedAt
-
-        const feedEpisode = new FeedEpisode()
-        feedEpisode.setFromPodcastEpisode(libraryItem, serverAddress, slug, episode, this.meta)
-        this.episodes.push(feedEpisode)
-      })
-    } else {
-      // AUDIOBOOK EPISODES
-      const useChapterTitles = this.checkUseChapterTitlesForEpisodes(libraryItem)
-      media.tracks.forEach((audioTrack) => {
-        const feedEpisode = new FeedEpisode()
-        feedEpisode.setFromAudiobookTrack(libraryItem, serverAddress, slug, audioTrack, this.meta, useChapterTitles)
-        this.episodes.push(feedEpisode)
-      })
-    }
-
-    this.createdAt = Date.now()
-    this.updatedAt = Date.now()
-  }
-
   updateFromItem(libraryItem) {
     const media = libraryItem.media
     const mediaMetadata = media.metadata
@@ -176,7 +115,7 @@ class Feed {
     this.meta.title = mediaMetadata.title
     this.meta.description = mediaMetadata.description
     this.meta.author = author
-    this.meta.imageUrl = media.coverPath ? `${this.serverAddress}/feed/${this.slug}/cover${coverFileExtension}` : `${this.serverAddress}/Logo.png`
+    this.meta.imageUrl = media.coverPath ? `/feed/${this.slug}/cover${coverFileExtension}` : `/Logo.png`
     this.meta.explicit = !!mediaMetadata.explicit
     this.meta.type = mediaMetadata.type
     this.meta.language = mediaMetadata.language
@@ -202,11 +141,10 @@ class Feed {
     }
 
     this.updatedAt = Date.now()
-    this.xml = null
   }
 
   setFromCollection(userId, slug, collectionExpanded, serverAddress, preventIndexing = true, ownerName = null, ownerEmail = null) {
-    const feedUrl = `${serverAddress}/feed/${slug}`
+    const feedUrl = `/feed/${slug}`
 
     const itemsWithTracks = collectionExpanded.books.filter((libraryItem) => libraryItem.media.tracks.length)
     const firstItemWithCover = itemsWithTracks.find((item) => item.media.coverPath)
@@ -227,9 +165,9 @@ class Feed {
     this.meta.title = collectionExpanded.name
     this.meta.description = collectionExpanded.description || ''
     this.meta.author = this.getAuthorsStringFromLibraryItems(itemsWithTracks)
-    this.meta.imageUrl = this.coverPath ? `${serverAddress}/feed/${slug}/cover${coverFileExtension}` : `${serverAddress}/Logo.png`
+    this.meta.imageUrl = this.coverPath ? `/feed/${slug}/cover${coverFileExtension}` : `/Logo.png`
     this.meta.feedUrl = feedUrl
-    this.meta.link = `${serverAddress}/collection/${collectionExpanded.id}`
+    this.meta.link = `/collection/${collectionExpanded.id}`
     this.meta.explicit = !!itemsWithTracks.some((li) => li.media.metadata.explicit) // explicit if any item is explicit
     this.meta.preventIndexing = preventIndexing
     this.meta.ownerName = ownerName
@@ -272,7 +210,7 @@ class Feed {
     this.meta.title = collectionExpanded.name
     this.meta.description = collectionExpanded.description || ''
     this.meta.author = this.getAuthorsStringFromLibraryItems(itemsWithTracks)
-    this.meta.imageUrl = this.coverPath ? `${this.serverAddress}/feed/${this.slug}/cover${coverFileExtension}` : `${this.serverAddress}/Logo.png`
+    this.meta.imageUrl = this.coverPath ? `/feed/${this.slug}/cover${coverFileExtension}` : `/Logo.png`
     this.meta.explicit = !!itemsWithTracks.some((li) => li.media.metadata.explicit) // explicit if any item is explicit
 
     this.episodes = []
@@ -297,11 +235,10 @@ class Feed {
     })
 
     this.updatedAt = Date.now()
-    this.xml = null
   }
 
   setFromSeries(userId, slug, seriesExpanded, serverAddress, preventIndexing = true, ownerName = null, ownerEmail = null) {
-    const feedUrl = `${serverAddress}/feed/${slug}`
+    const feedUrl = `/feed/${slug}`
 
     let itemsWithTracks = seriesExpanded.books.filter((libraryItem) => libraryItem.media.tracks.length)
     // Sort series items by series sequence
@@ -326,9 +263,9 @@ class Feed {
     this.meta.title = seriesExpanded.name
     this.meta.description = seriesExpanded.description || ''
     this.meta.author = this.getAuthorsStringFromLibraryItems(itemsWithTracks)
-    this.meta.imageUrl = this.coverPath ? `${serverAddress}/feed/${slug}/cover${coverFileExtension}` : `${serverAddress}/Logo.png`
+    this.meta.imageUrl = this.coverPath ? `/feed/${slug}/cover${coverFileExtension}` : `/Logo.png`
     this.meta.feedUrl = feedUrl
-    this.meta.link = `${serverAddress}/library/${libraryId}/series/${seriesExpanded.id}`
+    this.meta.link = `/library/${libraryId}/series/${seriesExpanded.id}`
     this.meta.explicit = !!itemsWithTracks.some((li) => li.media.metadata.explicit) // explicit if any item is explicit
     this.meta.preventIndexing = preventIndexing
     this.meta.ownerName = ownerName
@@ -374,7 +311,7 @@ class Feed {
     this.meta.title = seriesExpanded.name
     this.meta.description = seriesExpanded.description || ''
     this.meta.author = this.getAuthorsStringFromLibraryItems(itemsWithTracks)
-    this.meta.imageUrl = this.coverPath ? `${this.serverAddress}/feed/${this.slug}/cover${coverFileExtension}` : `${this.serverAddress}/Logo.png`
+    this.meta.imageUrl = this.coverPath ? `/feed/${this.slug}/cover${coverFileExtension}` : `/Logo.png`
     this.meta.explicit = !!itemsWithTracks.some((li) => li.media.metadata.explicit) // explicit if any item is explicit
 
     this.episodes = []
@@ -399,18 +336,14 @@ class Feed {
     })
 
     this.updatedAt = Date.now()
-    this.xml = null
   }
 
-  buildXml() {
-    if (this.xml) return this.xml
-
-    var rssfeed = new RSS(this.meta.getRSSData())
+  buildXml(originalHostPrefix) {
+    var rssfeed = new RSS(this.meta.getRSSData(originalHostPrefix))
     this.episodes.forEach((ep) => {
-      rssfeed.item(ep.getRSSData())
+      rssfeed.item(ep.getRSSData(originalHostPrefix))
     })
-    this.xml = rssfeed.xml()
-    return this.xml
+    return rssfeed.xml()
   }
 
   getAuthorsStringFromLibraryItems(libraryItems) {

server/objects/FeedEpisode.js

@@ -79,7 +79,7 @@ class FeedEpisode {
     this.title = episode.title
     this.description = episode.description || ''
     this.enclosure = {
-      url: `${serverAddress}${contentUrl}`,
+      url: `${contentUrl}`,
       type: episode.audioTrack.mimeType,
       size: episode.size
     }
@@ -136,7 +136,7 @@ class FeedEpisode {
     this.title = title
     this.description = mediaMetadata.description || ''
     this.enclosure = {
-      url: `${serverAddress}${contentUrl}`,
+      url: `${contentUrl}`,
       type: audioTrack.mimeType,
       size: audioTrack.metadata.size
     }
@@ -151,15 +151,19 @@ class FeedEpisode {
     this.fullPath = audioTrack.metadata.path
   }
 
-  getRSSData() {
+  getRSSData(hostPrefix) {
     return {
       title: this.title,
       description: this.description || '',
-      url: this.link,
-      guid: this.enclosure.url,
+      url: `${hostPrefix}${this.link}`,
+      guid: `${hostPrefix}${this.enclosure.url}`,
       author: this.author,
       date: this.pubDate,
-      enclosure: this.enclosure,
+      enclosure: {
+        url: `${hostPrefix}${this.enclosure.url}`,
+        type: this.enclosure.type,
+        size: this.enclosure.size
+      },
       custom_elements: [
         { 'itunes:author': this.author },
         { 'itunes:duration': secondsToTimestamp(this.duration) },

server/objects/FeedMeta.js

@@ -60,42 +60,36 @@ class FeedMeta {
     }
   }
 
-  getRSSData() {
-    const blockTags = [
-      { 'itunes:block': 'yes' },
-      { 'googleplay:block': 'yes' }
-    ]
+  getRSSData(hostPrefix) {
+    const blockTags = [{ 'itunes:block': 'yes' }, { 'googleplay:block': 'yes' }]
     return {
       title: this.title,
       description: this.description || '',
       generator: 'Audiobookshelf',
-      feed_url: this.feedUrl,
-      site_url: this.link,
-      image_url: this.imageUrl,
+      feed_url: `${hostPrefix}${this.feedUrl}`,
+      site_url: `${hostPrefix}${this.link}`,
+      image_url: `${hostPrefix}${this.imageUrl}`,
       custom_namespaces: {
-        'itunes': 'http://www.itunes.com/dtds/podcast-1.0.dtd',
-        'psc': 'http://podlove.org/simple-chapters',
-        'podcast': 'https://podcastindex.org/namespace/1.0',
-        'googleplay': 'http://www.google.com/schemas/play-podcasts/1.0'
+        itunes: 'http://www.itunes.com/dtds/podcast-1.0.dtd',
+        psc: 'http://podlove.org/simple-chapters',
+        podcast: 'https://podcastindex.org/namespace/1.0',
+        googleplay: 'http://www.google.com/schemas/play-podcasts/1.0'
       },
       custom_elements: [
-        { 'language': this.language || 'en' },
-        { 'author': this.author || 'advplyr' },
+        { language: this.language || 'en' },
+        { author: this.author || 'advplyr' },
         { 'itunes:author': this.author || 'advplyr' },
         { 'itunes:summary': this.description || '' },
         { 'itunes:type': this.type },
         {
           'itunes:image': {
             _attr: {
-              href: this.imageUrl
+              href: `${hostPrefix}${this.imageUrl}`
             }
           }
         },
         {
-          'itunes:owner': [
-            { 'itunes:name': this.ownerName || this.author || '' },
-            { 'itunes:email': this.ownerEmail || '' }
-          ]
+          'itunes:owner': [{ 'itunes:name': this.ownerName || this.author || '' }, { 'itunes:email': this.ownerEmail || '' }]
         },
         { 'itunes:explicit': !!this.explicit },
         ...(this.preventIndexing ? blockTags : [])

server/objects/PodcastEpisodeDownload.js

@@ -53,6 +53,20 @@ class PodcastEpisodeDownload {
     if (globals.SupportedAudioTypes.includes(extname)) return extname
     return 'mp3'
   }
+  get enclosureType() {
+    const enclosureType = this.podcastEpisode?.enclosure?.type
+    return typeof enclosureType === 'string' ? enclosureType : null
+  }
+  /**
+   * RSS feed may have an episode with file extension of mp3 but the specified enclosure type is not mpeg.
+   * @see https://github.com/advplyr/audiobookshelf/issues/3711
+   *
+   * @returns {boolean}
+   */
+  get isMp3() {
+    if (this.enclosureType && !this.enclosureType.includes('mpeg')) return false
+    return this.fileExtension === 'mp3'
+  }
 
   get targetFilename() {
     const appendage = this.appendEpisodeId ? ` (${this.podcastEpisode.id})` : ''

server/objects/settings/ServerSettings.js

@@ -24,6 +24,7 @@ class ServerSettings {
     // Security/Rate limits
     this.rateLimitLoginRequests = 10
     this.rateLimitLoginWindow = 10 * 60 * 1000 // 10 Minutes
+    this.allowIframe = false
 
     // Backups
     this.backupPath = Path.join(global.MetadataPath, 'backups')
@@ -99,6 +100,7 @@ class ServerSettings {
 
     this.rateLimitLoginRequests = !isNaN(settings.rateLimitLoginRequests) ? Number(settings.rateLimitLoginRequests) : 10
     this.rateLimitLoginWindow = !isNaN(settings.rateLimitLoginWindow) ? Number(settings.rateLimitLoginWindow) : 10 * 60 * 1000 // 10 Minutes
+    this.allowIframe = !!settings.allowIframe
 
     this.backupPath = settings.backupPath || Path.join(global.MetadataPath, 'backups')
     this.backupSchedule = settings.backupSchedule || false
@@ -190,6 +192,11 @@ class ServerSettings {
       Logger.info(`[ServerSettings] Using backup path from environment variable ${process.env.BACKUP_PATH}`)
       this.backupPath = process.env.BACKUP_PATH
     }
+
+    if (process.env.ALLOW_IFRAME === '1' && !this.allowIframe) {
+      Logger.info(`[ServerSettings] Using allowIframe from environment variable`)
+      this.allowIframe = true
+    }
   }
 
   toJSON() {
@@ -207,6 +214,7 @@ class ServerSettings {
       metadataFileFormat: this.metadataFileFormat,
       rateLimitLoginRequests: this.rateLimitLoginRequests,
       rateLimitLoginWindow: this.rateLimitLoginWindow,
+      allowIframe: this.allowIframe,
       backupPath: this.backupPath,
       backupSchedule: this.backupSchedule,
       backupsToKeep: this.backupsToKeep,

server/utils/queries/userStats.js

@@ -127,20 +127,20 @@ module.exports = {
           bookListeningMap[ls.displayTitle] += listeningSessionListeningTime
         }
 
-        const authors = ls.mediaMetadata.authors || []
+        const authors = ls.mediaMetadata?.authors || []
         authors.forEach((au) => {
           if (!authorListeningMap[au.name]) authorListeningMap[au.name] = 0
           authorListeningMap[au.name] += listeningSessionListeningTime
         })
 
-        const narrators = ls.mediaMetadata.narrators || []
+        const narrators = ls.mediaMetadata?.narrators || []
         narrators.forEach((narrator) => {
           if (!narratorListeningMap[narrator]) narratorListeningMap[narrator] = 0
           narratorListeningMap[narrator] += listeningSessionListeningTime
         })
 
         // Filter out bad genres like "audiobook" and "audio book"
-        const genres = (ls.mediaMetadata.genres || []).filter((g) => g && !g.toLowerCase().includes('audiobook') && !g.toLowerCase().includes('audio book'))
+        const genres = (ls.mediaMetadata?.genres || []).filter((g) => g && !g.toLowerCase().includes('audiobook') && !g.toLowerCase().includes('audio book'))
         genres.forEach((genre) => {
           if (!genreListeningMap[genre]) genreListeningMap[genre] = 0
           genreListeningMap[genre] += listeningSessionListeningTime

test/server/migrations/v2.17.5-remove-host-from-feed-urls.test.js

@@ -0,0 +1,202 @@
+const { expect } = require('chai')
+const sinon = require('sinon')
+const { up, down } = require('../../../server/migrations/v2.17.5-remove-host-from-feed-urls')
+const { Sequelize, DataTypes } = require('sequelize')
+const Logger = require('../../../server/Logger')
+
+const defineModels = (sequelize) => {
+  const Feeds = sequelize.define('Feeds', {
+    id: { type: DataTypes.UUID, primaryKey: true, defaultValue: DataTypes.UUIDV4 },
+    feedUrl: { type: DataTypes.STRING },
+    imageUrl: { type: DataTypes.STRING },
+    siteUrl: { type: DataTypes.STRING },
+    serverAddress: { type: DataTypes.STRING }
+  })
+
+  const FeedEpisodes = sequelize.define('FeedEpisodes', {
+    id: { type: DataTypes.UUID, primaryKey: true, defaultValue: DataTypes.UUIDV4 },
+    feedId: { type: DataTypes.UUID },
+    siteUrl: { type: DataTypes.STRING },
+    enclosureUrl: { type: DataTypes.STRING }
+  })
+
+  return { Feeds, FeedEpisodes }
+}
+
+describe('Migration v2.17.4-use-subfolder-for-oidc-redirect-uris', () => {
+  let queryInterface, logger, context
+  let sequelize
+  let Feeds, FeedEpisodes
+  const feed1Id = '00000000-0000-4000-a000-000000000001'
+  const feed2Id = '00000000-0000-4000-a000-000000000002'
+  const feedEpisode1Id = '00000000-4000-a000-0000-000000000011'
+  const feedEpisode2Id = '00000000-4000-a000-0000-000000000012'
+  const feedEpisode3Id = '00000000-4000-a000-0000-000000000021'
+
+  before(async () => {
+    sequelize = new Sequelize({ dialect: 'sqlite', storage: ':memory:', logging: false })
+    queryInterface = sequelize.getQueryInterface()
+    ;({ Feeds, FeedEpisodes } = defineModels(sequelize))
+    await sequelize.sync()
+  })
+
+  after(async () => {
+    await sequelize.close()
+  })
+
+  beforeEach(async () => {
+    // Reset tables before each test
+    await Feeds.destroy({ where: {}, truncate: true })
+    await FeedEpisodes.destroy({ where: {}, truncate: true })
+
+    logger = {
+      info: sinon.stub(),
+      error: sinon.stub()
+    }
+    context = { queryInterface, logger }
+  })
+
+  describe('up', () => {
+    it('should remove serverAddress from URLs in Feeds and FeedEpisodes tables', async () => {
+      await Feeds.bulkCreate([
+        { id: feed1Id, feedUrl: 'http://server1.com/feed1', imageUrl: 'http://server1.com/img1', siteUrl: 'http://server1.com/site1', serverAddress: 'http://server1.com' },
+        { id: feed2Id, feedUrl: 'http://server2.com/feed2', imageUrl: 'http://server2.com/img2', siteUrl: 'http://server2.com/site2', serverAddress: 'http://server2.com' }
+      ])
+
+      await FeedEpisodes.bulkCreate([
+        { id: feedEpisode1Id, feedId: feed1Id, siteUrl: 'http://server1.com/episode11', enclosureUrl: 'http://server1.com/enclosure11' },
+        { id: feedEpisode2Id, feedId: feed1Id, siteUrl: 'http://server1.com/episode12', enclosureUrl: 'http://server1.com/enclosure12' },
+        { id: feedEpisode3Id, feedId: feed2Id, siteUrl: 'http://server2.com/episode21', enclosureUrl: 'http://server2.com/enclosure21' }
+      ])
+
+      await up({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(logger.info.calledWith('[2.17.5 migration] UPGRADE BEGIN: 2.17.5-remove-host-from-feed-urls')).to.be.true
+      expect(logger.info.calledWith('[2.17.5 migration] Removing serverAddress from Feeds table URLs')).to.be.true
+
+      expect(feeds[0].feedUrl).to.equal('/feed1')
+      expect(feeds[0].imageUrl).to.equal('/img1')
+      expect(feeds[0].siteUrl).to.equal('/site1')
+      expect(feeds[1].feedUrl).to.equal('/feed2')
+      expect(feeds[1].imageUrl).to.equal('/img2')
+      expect(feeds[1].siteUrl).to.equal('/site2')
+
+      expect(logger.info.calledWith('[2.17.5 migration] Removed serverAddress from Feeds table URLs')).to.be.true
+      expect(logger.info.calledWith('[2.17.5 migration] Removing serverAddress from FeedEpisodes table URLs')).to.be.true
+
+      expect(feedEpisodes[0].siteUrl).to.equal('/episode11')
+      expect(feedEpisodes[0].enclosureUrl).to.equal('/enclosure11')
+      expect(feedEpisodes[1].siteUrl).to.equal('/episode12')
+      expect(feedEpisodes[1].enclosureUrl).to.equal('/enclosure12')
+      expect(feedEpisodes[2].siteUrl).to.equal('/episode21')
+      expect(feedEpisodes[2].enclosureUrl).to.equal('/enclosure21')
+
+      expect(logger.info.calledWith('[2.17.5 migration] Removed serverAddress from FeedEpisodes table URLs')).to.be.true
+      expect(logger.info.calledWith('[2.17.5 migration] UPGRADE END: 2.17.5-remove-host-from-feed-urls')).to.be.true
+    })
+
+    it('should handle null URLs in Feeds and FeedEpisodes tables', async () => {
+      await Feeds.bulkCreate([{ id: feed1Id, feedUrl: 'http://server1.com/feed1', imageUrl: null, siteUrl: 'http://server1.com/site1', serverAddress: 'http://server1.com' }])
+
+      await FeedEpisodes.bulkCreate([{ id: feedEpisode1Id, feedId: feed1Id, siteUrl: null, enclosureUrl: 'http://server1.com/enclosure11' }])
+
+      await up({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(feeds[0].feedUrl).to.equal('/feed1')
+      expect(feeds[0].imageUrl).to.be.null
+      expect(feeds[0].siteUrl).to.equal('/site1')
+      expect(feedEpisodes[0].siteUrl).to.be.null
+      expect(feedEpisodes[0].enclosureUrl).to.equal('/enclosure11')
+    })
+
+    it('should handle null serverAddress in Feeds table', async () => {
+      await Feeds.bulkCreate([{ id: feed1Id, feedUrl: 'http://server1.com/feed1', imageUrl: 'http://server1.com/img1', siteUrl: 'http://server1.com/site1', serverAddress: null }])
+      await FeedEpisodes.bulkCreate([{ id: feedEpisode1Id, feedId: feed1Id, siteUrl: 'http://server1.com/episode11', enclosureUrl: 'http://server1.com/enclosure11' }])
+
+      await up({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(feeds[0].feedUrl).to.equal('http://server1.com/feed1')
+      expect(feeds[0].imageUrl).to.equal('http://server1.com/img1')
+      expect(feeds[0].siteUrl).to.equal('http://server1.com/site1')
+      expect(feedEpisodes[0].siteUrl).to.equal('http://server1.com/episode11')
+      expect(feedEpisodes[0].enclosureUrl).to.equal('http://server1.com/enclosure11')
+    })
+  })
+
+  describe('down', () => {
+    it('should add serverAddress back to URLs in Feeds and FeedEpisodes tables', async () => {
+      await Feeds.bulkCreate([
+        { id: feed1Id, feedUrl: '/feed1', imageUrl: '/img1', siteUrl: '/site1', serverAddress: 'http://server1.com' },
+        { id: feed2Id, feedUrl: '/feed2', imageUrl: '/img2', siteUrl: '/site2', serverAddress: 'http://server2.com' }
+      ])
+
+      await FeedEpisodes.bulkCreate([
+        { id: feedEpisode1Id, feedId: feed1Id, siteUrl: '/episode11', enclosureUrl: '/enclosure11' },
+        { id: feedEpisode2Id, feedId: feed1Id, siteUrl: '/episode12', enclosureUrl: '/enclosure12' },
+        { id: feedEpisode3Id, feedId: feed2Id, siteUrl: '/episode21', enclosureUrl: '/enclosure21' }
+      ])
+
+      await down({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(logger.info.calledWith('[2.17.5 migration] DOWNGRADE BEGIN: 2.17.5-remove-host-from-feed-urls')).to.be.true
+      expect(logger.info.calledWith('[2.17.5 migration] Adding serverAddress back to Feeds table URLs')).to.be.true
+
+      expect(feeds[0].feedUrl).to.equal('http://server1.com/feed1')
+      expect(feeds[0].imageUrl).to.equal('http://server1.com/img1')
+      expect(feeds[0].siteUrl).to.equal('http://server1.com/site1')
+      expect(feeds[1].feedUrl).to.equal('http://server2.com/feed2')
+      expect(feeds[1].imageUrl).to.equal('http://server2.com/img2')
+      expect(feeds[1].siteUrl).to.equal('http://server2.com/site2')
+
+      expect(logger.info.calledWith('[2.17.5 migration] Added serverAddress back to Feeds table URLs')).to.be.true
+      expect(logger.info.calledWith('[2.17.5 migration] Adding serverAddress back to FeedEpisodes table URLs')).to.be.true
+
+      expect(feedEpisodes[0].siteUrl).to.equal('http://server1.com/episode11')
+      expect(feedEpisodes[0].enclosureUrl).to.equal('http://server1.com/enclosure11')
+      expect(feedEpisodes[1].siteUrl).to.equal('http://server1.com/episode12')
+      expect(feedEpisodes[1].enclosureUrl).to.equal('http://server1.com/enclosure12')
+      expect(feedEpisodes[2].siteUrl).to.equal('http://server2.com/episode21')
+      expect(feedEpisodes[2].enclosureUrl).to.equal('http://server2.com/enclosure21')
+
+      expect(logger.info.calledWith('[2.17.5 migration] DOWNGRADE END: 2.17.5-remove-host-from-feed-urls')).to.be.true
+    })
+
+    it('should handle null URLs in Feeds and FeedEpisodes tables', async () => {
+      await Feeds.bulkCreate([{ id: feed1Id, feedUrl: '/feed1', imageUrl: null, siteUrl: '/site1', serverAddress: 'http://server1.com' }])
+      await FeedEpisodes.bulkCreate([{ id: feedEpisode1Id, feedId: feed1Id, siteUrl: null, enclosureUrl: '/enclosure11' }])
+
+      await down({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(feeds[0].feedUrl).to.equal('http://server1.com/feed1')
+      expect(feeds[0].imageUrl).to.be.null
+      expect(feeds[0].siteUrl).to.equal('http://server1.com/site1')
+      expect(feedEpisodes[0].siteUrl).to.be.null
+      expect(feedEpisodes[0].enclosureUrl).to.equal('http://server1.com/enclosure11')
+    })
+
+    it('should handle null serverAddress in Feeds table', async () => {
+      await Feeds.bulkCreate([{ id: feed1Id, feedUrl: '/feed1', imageUrl: '/img1', siteUrl: '/site1', serverAddress: null }])
+      await FeedEpisodes.bulkCreate([{ id: feedEpisode1Id, feedId: feed1Id, siteUrl: '/episode11', enclosureUrl: '/enclosure11' }])
+
+      await down({ context })
+      const feeds = await Feeds.findAll({ raw: true })
+      const feedEpisodes = await FeedEpisodes.findAll({ raw: true })
+
+      expect(feeds[0].feedUrl).to.equal('/feed1')
+      expect(feeds[0].imageUrl).to.equal('/img1')
+      expect(feeds[0].siteUrl).to.equal('/site1')
+      expect(feedEpisodes[0].siteUrl).to.equal('/episode11')
+      expect(feedEpisodes[0].enclosureUrl).to.equal('/enclosure11')
+    })
+  })
+})