<template> <div class="w-full my-2"> <div class="w-full bg-primary px-6 py-2 flex items-center cursor-pointer" @click.stop="clickBar"> <p class="pr-4">Chapters</p> <span class="bg-black-400 rounded-xl py-1 px-2 text-sm font-mono">{{ chapters.length }}</span> <div class="flex-grow" /> <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2">Edit Chapters</ui-btn> <div v-if="!keepOpen" class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''"> <span class="material-icons text-4xl">expand_more</span> </div> </div> <transition name="slide"> <table class="text-sm tracksTable" v-show="expanded || keepOpen"> <tr class="font-book"> <th class="text-left w-16"><span class="px-4">Id</span></th> <th class="text-left">Title</th> <th class="text-center">Start</th> <th class="text-center">End</th> </tr> <tr v-for="chapter in chapters" :key="chapter.id"> <td class="text-left"> <p class="px-4">{{ chapter.id }}</p> </td> <td class="font-book"> {{ chapter.title }} </td> <td class="font-mono text-center"> {{ $secondsToTimestamp(chapter.start) }} </td> <td class="font-mono text-center"> {{ $secondsToTimestamp(chapter.end) }} </td> </tr> </table> </transition> </div> </template> <script> export default { props: { libraryItem: { type: Object, default: () => {} }, keepOpen: Boolean }, data() { return { expanded: false } }, computed: { libraryItemId() { return this.libraryItem.id }, media() { return this.libraryItem ? this.libraryItem.media || {} : {} }, chapters() { return this.media.chapters || [] }, userCanUpdate() { return this.$store.getters['user/getUserCanUpdate'] } }, methods: { clickBar() { this.expanded = !this.expanded } }, mounted() {} } </script>