audiobookshelf/client/components/modals/player/QueueItemsModal.vue

<template>
  <modals-modal v-model="show" name="queue-items" :width="800" :height="'unset'">
    <template #outer>
      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderPlayerQueue }}</p>
      </div>
    </template>
    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden py-4" style="max-height: 80vh">
      <div v-if="show" class="w-full h-full">
        <div class="pb-4 px-4 flex items-center">
          <p class="text-base text-gray-200">{{ $strings.HeaderPlayerQueue }}</p>
          <p class="text-base text-gray-400 px-4">{{ playerQueueItems.length }} Items</p>
          <div class="flex-grow" />
          <ui-checkbox v-model="playerQueueAutoPlay" label="Auto Play" medium checkbox-bg="primary" border-color="gray-600" label-class="pl-2 mb-px" />
        </div>
        <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem" @remove="removeItem" />
      </div>
    </div>
  </modals-modal>
</template>

<script>
export default {
  props: {
    value: Boolean,
    libraryItemId: String
  },
  data() {
    return {}
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    playerQueueAutoPlay: {
      get() {
        return this.$store.state.playerQueueAutoPlay
      },
      set(val) {
        this.$store.commit('setPlayerQueueAutoPlay', val)
      }
    },
    playerQueueItems() {
      return this.$store.state.playerQueueItems || []
    }
  },
  methods: {
    playItem(item) {
      this.$eventBus.$emit('play-item', {
        libraryItemId: item.libraryItemId,
        episodeId: item.episodeId || null,
        queueItems: this.playerQueueItems
      })
      this.show = false
    },
    removeItem(item) {
      this.$store.commit('removeItemFromQueue', item)
    }
  }
}
</script>