Update:Show loading indicator on play buttons when starting playback

components/app/AudioPlayerContainer.vue

@@ -204,6 +204,7 @@ export default {
           message: `Cannot cast downloaded media items. Confirm to close cast and play on your device.`
         })
         if (!value) {
+          this.$store.commit('setPlayerDoneStartingPlayback')
           return
         }
       }
@@ -217,6 +218,7 @@ export default {
         } else if (this.$refs.audioPlayer) {
           this.$refs.audioPlayer.play()
         }
+        this.$store.commit('setPlayerDoneStartingPlayback')
         return
       }
 
@@ -254,6 +256,9 @@ export default {
           console.error('Failed', error)
           this.$toast.error('Failed to play')
         })
+        .finally(() => {
+          this.$store.commit('setPlayerDoneStartingPlayback')
+        })
     },
     pauseItem() {
       if (this.$refs.audioPlayer && this.$refs.audioPlayer.isPlaying) {

components/cards/LazyBookCard.vue

@@ -46,8 +46,13 @@
     </div>
 
     <!-- Play/pause button for podcast episode -->
-    <div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-70" @click.stop="playEpisode">
+    <div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full" :class="{ 'bg-white/70': !playerIsStartingForThisMedia }" @click.stop="playEpisode">
-      <span class="material-icons text-6xl text-black text-opacity-80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+      <span v-if="!playerIsStartingForThisMedia" class="material-icons text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+      <div v-else class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black/80 rounded-full overflow-hidden">
+        <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" />
+        </svg>
+      </div>
     </div>
 
     <!-- No progress shown for collapsed series in library -->
@@ -322,6 +327,14 @@ export default {
     streamIsPlaying() {
       return this.store.state.playerIsPlaying && this.isStreaming
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      const mediaId = this.store.state.playerStartingPlaybackMediaId
+      return mediaId === this.recentEpisode?.id
+    },
     isMissing() {
       return this._libraryItem.isMissing
     },
@@ -447,6 +460,8 @@ export default {
     },
     async play() {},
     async playEpisode() {
+      if (this.playerIsStartingPlayback) return
+
       await this.$hapticsImpact()
       const eventBus = this.$eventBus || this.$nuxt.$eventBus
       if (this.streamIsPlaying) {
@@ -454,6 +469,7 @@ export default {
         return
       }
 
+      this.store.commit('setPlayerIsStartingPlayback', this.recentEpisode.id)
       if (this.localEpisode) {
         // Play episode locally
         eventBus.$emit('play-item', {

components/cards/LazyListBookCard.vue

@@ -176,7 +176,7 @@ export default {
       return this.mediaMetadata.series
     },
     seriesSequence() {
-      return this.series ? this.series.sequence : null
+      return this.series?.sequence || null
     },
     collapsedSeries() {
       // Only added to item object when collapseSeries is enabled
@@ -209,10 +209,10 @@ export default {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
     userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
+      return this.userProgress?.progress || 0
     },
     itemIsFinished() {
-      return this.userProgress ? !!this.userProgress.isFinished : false
+      return !!this.userProgress?.isFinished
     },
     showError() {
       return this.numMissingParts || this.isMissing || this.isInvalid

components/tables/playlist/ItemTableRow.vue

@@ -13,8 +13,11 @@
           </div>
         </div>
         <div class="w-8 min-w-8 flex justify-center">
-          <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
+          <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
-            <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+            </svg>
           </button>
         </div>
         <div class="w-8 min-w-8 flex justify-center">
@@ -117,6 +120,15 @@ export default {
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      let thisMediaId = this.episodeId || this.libraryItem.id
+      return mediaId === thisMediaId
+    },
     userItemProgress() {
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, this.episodeId)
     },
@@ -142,10 +154,14 @@ export default {
       this.$emit('showMore', playlistItem)
     },
     async playClick() {
+      if (this.playerIsStartingPlayback) return
+
       await this.$hapticsImpact()
+      let mediaId = this.episodeId || this.libraryItem.id
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else if (this.localLibraryItem) {
+        this.$store.commit('setPlayerIsStartingPlayback', mediaId)
         this.$eventBus.$emit('play-item', {
           libraryItemId: this.localLibraryItem.id,
           episodeId: this.localEpisode?.id,
@@ -153,6 +169,7 @@ export default {
           serverEpisodeId: this.episodeId
         })
       } else {
+        this.$store.commit('setPlayerIsStartingPlayback', mediaId)
         this.$eventBus.$emit('play-item', {
           libraryItemId: this.libraryItem.id,
           episodeId: this.episodeId

components/tables/podcast/EpisodeRow.vue

@@ -29,7 +29,10 @@
 
       <div class="flex items-center pt-2">
         <div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
-          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <svg v-else 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" />
+          </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
@@ -118,6 +121,14 @@ export default {
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      return mediaId === this.episode?.id
+    },
     itemProgress() {
       if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
@@ -227,10 +238,14 @@ export default {
       }
     },
     async playClick() {
+      if (this.playerIsStartingPlayback) return
+
       await this.$hapticsImpact()
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
+        this.$store.commit('setPlayerIsStartingPlayback', this.episode.id)
+
         if (this.localEpisode && this.localLibraryItemId) {
           console.log('Play local episode', this.localEpisode.id, this.localLibraryItemId)
 

components/tables/podcast/LatestEpisodeRow.vue

@@ -29,7 +29,10 @@
 
       <div class="flex items-center pt-2">
         <div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
-          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <svg v-else 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" />
+          </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
@@ -122,6 +125,15 @@ export default {
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      if (!this.episode?.id) return false
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      return mediaId === this.episode.id
+    },
     itemProgress() {
       if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
       return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
@@ -135,10 +147,10 @@ export default {
       }
     },
     itemProgressPercent() {
-      return this.itemProgress ? this.itemProgress.progress : 0
+      return this.itemProgress?.progress || 0
     },
     userIsFinished() {
-      return this.itemProgress ? !!this.itemProgress.isFinished : false
+      return !!this.itemProgress?.isFinished
     },
     timeRemaining() {
       if (this.streamIsPlaying) return 'Playing'
@@ -154,7 +166,7 @@ export default {
       return this.$store.getters['globals/getDownloadItem'](this.libraryItemId, this.episode.id)
     },
     localEpisodeId() {
-      return this.localEpisode ? this.localEpisode.id : null
+      return this.localEpisode?.id || null
     },
     podcast() {
       return this.episode.podcast || {}
@@ -238,10 +250,14 @@ export default {
       }
     },
     async playClick() {
+      if (this.playerIsStartingPlayback) return
+
       await this.$hapticsImpact()
       if (this.streamIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
+        this.$store.commit('setPlayerIsStartingPlayback', this.episode.id)
+
         if (this.localEpisode && this.localLibraryItemId) {
           console.log('Play local episode', this.localEpisode.id, this.localLibraryItemId)
 

pages/collection/_id.vue

@@ -12,7 +12,7 @@
             {{ collectionName }}
           </h1>
           <div class="flex-grow" />
-          <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center justify-center h-9 mr-2 w-24" @click="clickPlay">
+          <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small :loading="playerIsStartingForThisMedia" class="flex items-center justify-center h-9 mr-2 w-24" @click="clickPlay">
             <span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
             {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
           </ui-btn>
@@ -53,6 +53,7 @@ export default {
   },
   data() {
     return {
+      mediaIdStartingPlayback: null,
       processingRemove: false
     }
   },
@@ -77,17 +78,30 @@ export default {
     streaming() {
       return !!this.playableBooks.find((b) => this.$store.getters['getIsMediaStreaming'](b.id))
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      if (!this.mediaIdStartingPlayback) return false
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      return mediaId === this.mediaIdStartingPlayback
+    },
     showPlayButton() {
       return this.playableBooks.length
     }
   },
   methods: {
     clickPlay() {
+      if (this.playerIsStartingPlayback) return
+
       var nextBookNotRead = this.playableBooks.find((pb) => {
         var prog = this.$store.getters['user/getUserMediaProgress'](pb.id)
-        return !prog || !prog.isFinished
+        return !prog?.isFinished
       })
       if (nextBookNotRead) {
+        this.mediaIdStartingPlayback = nextBookNotRead.id
+        this.$store.commit('setPlayerIsStartingPlayback', nextBookNotRead.id)
         this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.id })
       }
     }

pages/item/_id/_episode/index.vue

@@ -29,7 +29,7 @@
 
     <!-- action buttons -->
     <div class="flex mt-4 -mx-1">
-      <ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
+      <ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
         <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
         <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : localEpisodeId ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
       </ui-btn>
@@ -210,6 +210,15 @@ export default {
     playerIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isPlaying
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      if (!this.serverEpisodeId) return false
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      return mediaId === this.serverEpisodeId
+    },
     userItemProgress() {
       if (this.isLocal) return this.localItemProgress
       return this.serverItemProgress
@@ -332,10 +341,14 @@ export default {
       }
     },
     async playClick() {
+      if (this.playerIsStartingPlayback) return
+
       await this.$hapticsImpact()
       if (this.playerIsPlaying) {
         this.$eventBus.$emit('pause-item')
       } else {
+        this.$store.commit('setPlayerIsStartingPlayback', this.serverEpisodeId)
+
         if (this.localEpisodeId && this.localLibraryItemId && !this.isLocal) {
           console.log('Play local episode', this.localEpisodeId, this.localLibraryItemId)
 

pages/item/_id/index.vue

@@ -45,7 +45,7 @@
       <!-- action buttons -->
       <div class="col-span-full">
         <div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
-          <ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
+          <ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
             <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : isPodcast ? $strings.ButtonNextEpisode : hasLocal ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
           </ui-btn>
@@ -205,7 +205,8 @@ export default {
       coverBgIsLight: false,
       windowWidth: 0,
       descriptionClamped: false,
-      showFullDescription: false
+      showFullDescription: false,
+      episodeStartingPlayback: null
     }
   },
   computed: {
@@ -393,6 +394,19 @@ export default {
     playerIsPlaying() {
       return this.$store.state.playerIsPlaying && (this.isStreaming || this.isPlaying)
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      if (this.isPodcast) {
+        if (!this.episodeStartingPlayback) return false
+        return mediaId === this.episodeStartingPlayback
+      } else {
+        return mediaId === this.serverLibraryItemId
+      }
+    },
     tracks() {
       return this.media.tracks || []
     },
@@ -488,6 +502,8 @@ export default {
       }
     },
     async play(startTime = null) {
+      if (this.playerIsStartingPlayback) return
+
       if (this.isPodcast) {
         this.episodes.sort((a, b) => {
           return String(b.publishedAt).localeCompare(String(a.publishedAt), undefined, { numeric: true, sensitivity: 'base' })
@@ -500,7 +516,7 @@ export default {
           } else {
             podcastProgress = this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, ep.id)
           }
-          return !podcastProgress || !podcastProgress.isFinished
+          return !podcastProgress?.isFinished
         })
 
         if (!episode) episode = this.episodes[0]
@@ -515,6 +531,8 @@ export default {
         }
         const serverEpisodeId = !this.isLocal ? episodeId : localEpisode?.serverEpisodeId || null
 
+        this.episodeStartingPlayback = serverEpisodeId
+        this.$store.commit('setPlayerIsStartingPlayback', serverEpisodeId)
         if (serverEpisodeId && this.serverLibraryItemId && this.isCasting) {
           // If casting and connected to server for local library item then send server library item id
           this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId, episodeId: serverEpisodeId })
@@ -543,6 +561,7 @@ export default {
           if (!value) return
         }
 
+        this.$store.commit('setPlayerIsStartingPlayback', this.serverLibraryItemId)
         this.$eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.serverLibraryItemId, startTime })
       }
     },

pages/localMedia/folders/_id.vue

@@ -110,9 +110,6 @@ export default {
         this.$router.replace('/localMedia/folders')
       }
     },
-    play(mediaItem) {
-      this.$eventBus.$emit('play-item', { libraryItemId: mediaItem.id })
-    },
     async init() {
       var folder = await this.$db.getLocalFolder(this.folderId)
       this.folder = folder

pages/localMedia/item/_id.vue

@@ -232,6 +232,10 @@ export default {
           }
         ]
       }
+    },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
     }
   },
   methods: {
@@ -279,7 +283,9 @@ export default {
       this.showDialog = true
     },
     async play() {
+      if (this.playerIsStartingPlayback) return
       await this.$hapticsImpact()
+      this.$store.commit('setPlayerIsStartingPlayback', this.localLibraryItemId)
       this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItemId })
     },
     getCapImageSrc(contentUrl) {

pages/media/_id/history.vue

@@ -39,8 +39,7 @@ export default {
   },
   data() {
     return {
-      onMediaItemHistoryUpdatedListener: null,
+      onMediaItemHistoryUpdatedListener: null
-      startingPlayback: false
     }
   },
   computed: {
@@ -123,21 +122,21 @@ export default {
       })
 
       return groups
+    },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
     }
   },
   methods: {
     async clickPlaybackTime(time) {
-      if (this.startingPlayback) return
+      if (this.playerIsStartingPlayback) return
-      this.startingPlayback = true
-      await this.$hapticsImpact()
-      console.log('Click playback time', time)
-      this.playAtTime(time)
 
-      setTimeout(() => {
+      await this.$hapticsImpact()
-        this.startingPlayback = false
+      this.playAtTime(time)
-      }, 1000)
     },
     playAtTime(startTime) {
+      this.$store.commit('setPlayerIsStartingPlayback', this.mediaItemEpisodeId || this.mediaItemLibraryItemId)
       if (this.mediaItemIsLocal) {
         // Local only
         this.$eventBus.$emit('play-item', { libraryItemId: this.mediaItemLibraryItemId, episodeId: this.mediaItemEpisodeId, startTime })

pages/playlist/_id.vue

@@ -10,7 +10,7 @@
             {{ playlistName }}
           </h1>
           <div class="flex-grow" />
-          <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center justify-center text-center h-9 mr-2 w-24" @click="clickPlay">
+          <ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center text-center h-9 mr-2 w-24" @click="clickPlay">
             <span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
             {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
           </ui-btn>
@@ -76,7 +76,8 @@ export default {
       showMoreMenu: false,
       processing: false,
       selectedLibraryItem: null,
-      selectedEpisode: null
+      selectedEpisode: null,
+      mediaIdStartingPlayback: null
     }
   },
   computed: {
@@ -108,6 +109,15 @@ export default {
     },
     showPlayButton() {
       return this.playableItems.length
+    },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.$store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      if (!this.mediaIdStartingPlayback) return false
+      const mediaId = this.$store.state.playerStartingPlaybackMediaId
+      return mediaId === this.mediaIdStartingPlayback
     }
   },
   methods: {
@@ -122,6 +132,8 @@ export default {
         return !prog?.isFinished
       })
       if (nextItem) {
+        this.mediaIdStartingPlayback = nextItem.episodeId || nextItem.libraryItemId
+        this.$store.commit('setPlayerIsStartingPlayback', this.mediaIdStartingPlayback)
         if (nextItem.localLibraryItem) {
           this.$eventBus.$emit('play-item', { libraryItemId: nextItem.localLibraryItem.id, episodeId: nextItem.localEpisode?.id, serverLibraryItemId: nextItem.libraryItemId, serverEpisodeId: nextItem.episodeId })
         } else {

store/index.js

@@ -7,6 +7,8 @@ export const state = () => ({
   currentPlaybackSession: null,
   playerIsPlaying: false,
   playerIsFullscreen: false,
+  playerIsStartingPlayback: false, // When pressing play before native play response
+  playerStartingPlaybackMediaId: null,
   isCasting: false,
   isCastAvailable: false,
   attemptingConnection: false,
@@ -131,6 +133,14 @@ export const mutations = {
   setPlayerFullscreen(state, val) {
     state.playerIsFullscreen = val
   },
+  setPlayerIsStartingPlayback(state, mediaId) {
+    state.playerStartingPlaybackMediaId = mediaId
+    state.playerIsStartingPlayback = true
+  },
+  setPlayerDoneStartingPlayback(state) {
+    state.playerStartingPlaybackMediaId = null
+    state.playerIsStartingPlayback = false
+  },
   setHasStoragePermission(state, val) {
     state.hasStoragePermission = val
   },