feat: better display the reading status for episodes (in episodes list / podcast section) (close #51)

src/components/Feed/Episodes.vue

@@ -19,6 +19,11 @@
 				<template #subname>
 					{{ episode.duration }}
 				</template>
+				<template #indicator>
+					<NcProgressBar v-if="episode.action && episode.action.action === 'PLAY'"
+						class="progress"
+						:value="episode.action.position * 100 / episode.action.total" />
+				</template>
 				<template #actions>
 					<NcActionButton v-if="!isCurrentEpisode(episode)" @click="load(episode)">
 						<template #icon>
@@ -48,7 +53,7 @@
 </template>
 
 <script>
-import { NcActionButton, NcAvatar, NcListItem, NcModal } from '@nextcloud/vue'
+import { NcActionButton, NcAvatar, NcListItem, NcModal, NcProgressBar } from '@nextcloud/vue'
 import Loading from '../Atoms/Loading.vue'
 import Modal from '../Atoms/Modal.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
@@ -68,6 +73,7 @@ export default {
 		NcAvatar,
 		NcListItem,
 		NcModal,
+		NcProgressBar,
 		PlayButton,
 		StopButton,
 	},
@@ -121,4 +127,8 @@ export default {
 	.ended {
 		opacity: .4;
 	}
+
+	.progress {
+		margin-top: .4rem;
+	}
 </style>