Added podcast episode filter

client/components/controls/EpisodeFilterSelect.vue

@@ -0,0 +1,73 @@
+<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">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</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 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <template v-for="item in items">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      showMenu: false,
+      items: [
+        {
+          text: 'All Episodes',
+          value: 'all'
+        },
+        {
+          text: 'Unplayed',
+          value: 'unplayed'
+        },
+        {
+          text: 'Played',
+          value: 'played'
+        },
+      ]
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      var _sel = this.items.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      this.selected = val
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>

client/components/tables/podcast/EpisodesTable.vue

@@ -3,12 +3,13 @@
     <div class="flex items-center mb-4">
       <p class="text-lg mb-0 font-semibold">Episodes</p>
       <div class="flex-grow" />
+      <controls-episode-filter-select v-model="filterKey" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="changeFilter" />
       <controls-episode-sort-select v-model="sortKey" :descending.sync="sortDesc" class="w-36 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" @change="changeSort" />
       <div v-if="userCanUpdate" class="w-12">
         <ui-icon-btn v-if="orderChanged" :loading="savingOrder" icon="save" bg-color="primary" class="ml-auto" @click="saveOrder" />
       </div>
     </div>
-    <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
+    <p v-if="!episodes.length || !episodesCopy.length" class="py-4 text-center text-lg">No Episodes</p>
     <draggable v-model="episodesCopy" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate">
       <transition-group type="transition" :name="!drag ? 'episode' : null">
         <template v-for="episode in episodesCopy">
@@ -35,9 +36,11 @@ export default {
   data() {
     return {
       sortKey: 'index',
+      filterKey: 'all',
       sortDesc: true,
       drag: false,
       episodesCopy: [],
+      episodesTmp: null,
       orderChanged: false,
       savingOrder: false
     }
@@ -59,7 +62,7 @@ export default {
       }
     },
     userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+      return this.$store.getters['user/getUserCanUpdate'] && this.filterKey == "all"
     },
     media() {
       return this.libraryItem.media || {}
@@ -82,6 +85,18 @@ export default {
 
       this.orderChanged = this.checkHasOrderChanged()
     },
+    changeFilter() {
+      if(this.episodesTmp == null || this.episodesTmp.length == this.episodesCopy.length) this.episodesTmp = this.episodesCopy
+      if(this.filterKey == "all") return this.episodesCopy = this.episodesTmp
+
+      this.episodesCopy = [...this.episodesTmp].filter(episode => {
+        const userState = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
+
+        if(this.filterKey == "played" && userState && userState.isFinished) return true
+        else if(this.filterKey == "unplayed" && userState == null || (userState != null && !userState.isFinished)) return true
+        else return false
+      })
+    },
     checkHasOrderChanged() {
       for (let i = 0; i < this.episodesCopy.length; i++) {
         var epc = this.episodesCopy[i]

package-lock.json

@@ -1,11 +1,12 @@
 {
   "name": "audiobookshelf",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "2.0.8",
+      "name": "audiobookshelf",
+      "version": "2.0.10",
       "license": "GPL-3.0",
       "dependencies": {
         "archiver": "^5.3.0",