[web] Change how data is loaded

web-src/src/components/ListAlbums.vue

@@ -18,39 +18,19 @@
     :media-kind="mediaKind"
     :show="showDetailsModal"
     @close="showDetailsModal = false"
-    @remove-podcast="openRemovePodcastDialog()"
-    @play-count-changed="onPlayCountChange()"
+    @play-count-changed="playCountChanged"
+    @podcast-deleted="podcastDeleted"
   />
-  <modal-dialog
-    :actions="actions"
-    :show="showRemovePodcastModal"
-    :title="$t('page.podcast.remove-podcast')"
-    @cancel="showRemovePodcastModal = false"
-    @remove="removePodcast"
-  >
-    <template #content>
-      <i18n-t keypath="list.albums.info" tag="p" scope="global">
-        <template #separator>
-          <br />
-        </template>
-        <template #name>
-          <b v-text="playlistToRemove.name" />
-        </template>
-      </i18n-t>
-    </template>
-  </modal-dialog>
 </template>
 
 <script>
 import ListItem from '@/components/ListItem.vue'
-import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import { useSettingsStore } from '@/stores/settings'
-import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { ListItem, ModalDialog, ModalDialogAlbum },
+  components: { ListItem, ModalDialogAlbum },
   props: {
     items: { required: true, type: Object },
     mediaKind: { default: '', type: String }
@@ -61,19 +41,11 @@ export default {
   },
   data() {
     return {
-      playlistToRemove: {},
       selectedItem: {},
-      showDetailsModal: false,
-      showRemovePodcastModal: false
+      showDetailsModal: false
     }
   },
   computed: {
-    actions() {
-      return [
-        { handler: 'cancel', icon: 'cancel', key: 'page.podcast.cancel' },
-        { handler: 'remove', icon: 'delete', key: 'page.podcast.remove' }
-      ]
-    },
     media_kind_resolved() {
       return this.mediaKind || this.selectedItem.media_kind
     }
@@ -102,27 +74,11 @@ export default {
       this.selectedItem = item
       this.showDetailsModal = true
     },
-    openRemovePodcastDialog() {
-      webapi
-        .library_album_tracks(this.selectedItem.id, { limit: 1 })
-        .then(({ data: album }) => {
-          webapi.library_track_playlists(album.items[0].id).then(({ data }) => {
-            ;[this.playlistToRemove] = data.items.filter(
-              (playlist) => playlist.type === 'rss'
-            )
-            this.showRemovePodcastModal = true
-            this.showDetailsModal = false
-          })
-        })
-    },
-    onPlayCountChange() {
+    playCountChanged() {
       this.$emit('play-count-changed')
     },
-    removePodcast() {
-      this.showRemovePodcastModal = false
-      webapi.library_playlist_delete(this.playlistToRemove.id).then(() => {
-        this.$emit('podcast-deleted')
-      })
+    podcastDeleted() {
+      this.$emit('podcast-deleted')
     }
   }
 }

web-src/src/components/ModalDialogAddRss.vue

@@ -6,13 +6,15 @@
     @close="$emit('close')"
   >
     <template #content>
-      <control-url-field
-        icon="rss"
-        :help="$t('dialog.add.rss.help')"
-        :loading="loading"
-        :placeholder="$t('dialog.add.rss.placeholder')"
-        @input="onUrlChange"
-      />
+      <form @submit.prevent="add">
+        <control-url-field
+          icon="rss"
+          :help="$t('dialog.add.rss.help')"
+          :loading="loading"
+          :placeholder="$t('dialog.add.rss.placeholder')"
+          @input="onUrlChange"
+        />
+      </form>
     </template>
   </modal-dialog>
 </template>
@@ -56,9 +58,10 @@ export default {
       webapi
         .library_add(this.url)
         .then(() => {
-          this.$emit('close')
           this.$emit('podcast-added')
+          this.$emit('close')
           this.url = ''
+          this.loading = false
         })
         .catch(() => {
           this.loading = false

web-src/src/components/ModalDialogAlbum.vue

@@ -5,28 +5,69 @@
     :show="show"
     @close="$emit('close')"
   />
+  <modal-dialog
+    :actions="actions"
+    :show="showRemovePodcastModal"
+    :title="$t('dialog.podcast.remove.title')"
+    @close="showRemovePodcastModal = false"
+    @remove="removePodcast"
+  >
+    <template #content>
+      <i18n-t keypath="dialog.podcast.remove.info" tag="p" scope="global">
+        <template #separator>
+          <br />
+        </template>
+        <template #name>
+          <b v-text="item.name" />
+        </template>
+      </i18n-t>
+    </template>
+  </modal-dialog>
 </template>
 
 <script>
+import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
-  components: { ModalDialogPlayable },
+  components: { ModalDialog, ModalDialogPlayable },
   props: {
     item: { required: true, type: Object },
     mediaKind: { default: '', type: String },
     show: Boolean
   },
-  emits: ['close', 'remove-podcast', 'play-count-changed'],
+  emits: ['close', 'play-count-changed', 'podcast-deleted'],
+  data() {
+    return {
+      showRemovePodcastModal: false
+    }
+  },
   computed: {
+    actions() {
+      return [
+        {
+          handler: this.cancel,
+          icon: 'cancel',
+          key: this.$t('actions.cancel')
+        },
+        {
+          handler: this.removePodcast,
+          icon: 'delete',
+          key: this.$t('actions.remove')
+        }
+      ]
+    },
     buttons() {
       if (this.media_kind_resolved === 'podcast') {
         if (this.item.data_kind === 'url') {
           return [
             { handler: this.markAsPlayed, key: 'actions.mark-as-played' },
-            { handler: this.removePodcast, key: 'actions.remove-podcast' }
+            {
+              handler: this.openRemovePodcastDialog,
+              key: 'actions.remove'
+            }
           ]
         }
         return [{ handler: this.markAsPlayed, key: 'actions.mark-as-played' }]
@@ -70,6 +111,9 @@ export default {
     }
   },
   methods: {
+    cancel() {
+      this.showRemovePodcastModal = false
+    },
     markAsPlayed() {
       webapi
         .library_album_track_update(this.item.id, { play_count: 'played' })
@@ -92,8 +136,21 @@ export default {
         })
       }
     },
+    openRemovePodcastDialog() {
+      this.showRemovePodcastModal = true
+      this.showDetailsModal = false
+    },
     removePodcast() {
-      this.$emit('remove-podcast')
+      this.showRemovePodcastModal = false
+      webapi.library_album_tracks(this.item.id, { limit: 1 }).then((album) => {
+        webapi.library_track_playlists(album.items[0].id).then((data) => {
+          const { id } = data.items.find((item) => item.type === 'rss')
+          webapi.library_playlist_delete(id).then(() => {
+            this.$emit('podcast-deleted')
+            this.$emit('close')
+          })
+        })
+      })
     }
   }
 }

web-src/src/components/ModalDialogQueueItem.vue

@@ -76,7 +76,7 @@ export default {
             key: 'property.quality',
             value: this.$t('dialog.track.quality-value', {
               bitrate: this.item.bitrate,
-              channels: this.$t('count.channels', this.item.channels),
+              channels: this.$t('data.channels', this.item.channels),
               format: this.item.type,
               samplerate: this.item.samplerate
             })

web-src/src/components/ModalDialogTrack.vue

@@ -68,7 +68,7 @@ export default {
               this.item.data_kind !== 'spotify' &&
               this.$t('dialog.track.quality-value', {
                 bitrate: this.item.bitrate,
-                channels: this.$t('count.channels', this.item.channels),
+                channels: this.$t('data.channels', this.item.channels),
                 format: this.item.type,
                 samplerate: this.item.samplerate
               })