tested with audio and video feeds

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

4 files changed, 137 insertions, 22 deletions

diff --git a/src/App.vue b/src/App.vue
index 79a14d71e..f07f5810a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,29 @@
 <template>
 	<NcContent app-name="news">
-		<Sidebar />
-		<NcAppContent>
-			<RouterView />
-		</NcAppContent>
+		<div id="news-app">
+			<div id="content-display" :class="{ playing: playingItem }">
+				<Sidebar />
+				<NcAppContent>
+					<RouterView />
+				</NcAppContent>
+			</div>
+			<div v-if="playingItem" class="podcast">
+				<audio controls
+					autoplay
+					:src="playingItem.enclosureLink"
+					@play="stopVideo()" />
+				<a class="button podcast-download"
+					:title="t('news', 'Download')"
+					:href="playingItem.enclosureLink"
+					target="_blank"
+					rel="noreferrer">{{ t('news', 'Download') }}</a>
+				<button class="podcast-close"
+					:title="t('news', 'Close')"
+					@click="stopPlaying()">
+					{{ t('news', 'Close') }}
+				</button>
+			</div>
+		</div>
 	</NcContent>
 </template>
 
@@ -13,7 +33,7 @@ import Vue from 'vue'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
-import { ACTIONS } from './store'
+import { ACTIONS, MUTATIONS } from './store'
 
 export default Vue.extend({
 	components: {
@@ -21,6 +41,11 @@ export default Vue.extend({
 		Sidebar,
 		NcAppContent,
 	},
+	computed: {
+		playingItem() {
+			return this.$store.state.items.playingItem
+		},
+	},
 	async created() {
 		// fetch folders and feeds to build side bar
 		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
@@ -28,6 +53,18 @@ export default Vue.extend({
 		// fetch starred to get starred count
 		await this.$store.dispatch(ACTIONS.FETCH_STARRED)
 	},
+	methods: {
+		stopPlaying() {
+			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, { item: undefined })
+		},
+		stopVideo() {
+			const videoElements = document.getElementsByTagName('video')
+
+			for (let i = 0; i < videoElements.length; i++) {
+				videoElements[i].pause()
+			}
+		},
+	},
 })
 </script>
 
@@ -35,4 +72,43 @@ export default Vue.extend({
 	.material-design-icon {
 		color: var(--color-text-lighter)
 	}
+
+	#news-app {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	#content-display {
+		display: flex;
+		flex-direction: row;
+	}
+
+	#content-display.playing {
+		height: calc(100vh - 98px)
+	}
+
+	.podcast {
+		position: absolute;
+		bottom: 0px;
+		height: 40px;
+		display: flex;
+		background-color: #474747;
+		width: 100%;
+	}
+
+	.podcast audio {
+		flex-grow: 1;
+		background-color: rgba(0,0,0,0);
+    height: 40px;
+	}
+
+	.podcast .podcast-download {
+		padding: 4px 10px;
+		margin: 2px 6px;
+	}
+
+	.podcast .podcast-close {
+		margin: 2px 6px;
+	}
 </style>
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index c22db1772..e68fa835a 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -50,34 +50,39 @@
 				</span>
 			</div>
 
-			<!-- TODO: Test audio/video -->
-			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure">
-				<button @click="play(item)">
+			<div v-if="getMediaType(item.enclosureMime) == 'audio'" class="enclosure audio">
+				<button @click="playAudio(item)">
 					{{ t('news', 'Play audio') }}
 				</button>
 				<a class="button"
+					style="text-decoration: none;"
 					:href="item.enclosureLink"
 					target="_blank"
 					rel="noreferrer">
 					{{ t('news', 'Download audio') }}
 				</a>
 			</div>
-			<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure">
+			<div v-if="getMediaType(item.enclosureMime) == 'video'" class="enclosure video">
 				<video controls
 					preload="none"
-					news-play-one
 					:src="item.enclosureLink"
-					:type="item.enclosureMime" />
-				<a class="button"
-					:href="item.enclosureLink"
-					target="_blank"
-					rel="noreferrer">
-					{{ t('news', 'Download video') }}
-				</a>
+					:type="item.enclosureMime"
+					:style="{ 'background-image': 'url('+item.mediaThumbnail+')' }"
+					@play="stopAudio()" />
+				<div class="download">
+					<a class="button"
+						style="text-decoration: none;"
+						:href="item.enclosureLink"
+						target="_blank"
+						rel="noreferrer">
+						{{ t('news', 'Download video') }}
+					</a>
+				</div>
 			</div>
 
-			<div v-if="item.mediaThumbnail" class="enclosure thumbnail">
-				<a :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
+			<div v-if="item.mediaThumbnail && getMediaType(item.enclosureMime) !== 'video'" class="enclosure thumbnail">
+				<a v-if="item.enclosureLink" :href="item.enclosureLink"><img :src="item.mediaThumbnail" alt=""></a>
+				<img v-else :src="item.mediaThumbnail" alt="">
 			</div>
 
 			<div v-if="item.mediaDescription" class="enclosure description" v-html="item.mediaDescription" />
@@ -177,11 +182,22 @@ export default Vue.extend({
 		},
 
 		getMediaType(mime: string): 'audio' | 'video' | false {
-			// TODO: figure out how to check media type
+			if (mime && mime.indexOf('audio') === 0) {
+				return 'audio'
+			} else if (mime && mime.indexOf('video') === 0) {
+				return 'video'
+			}
 			return false
 		},
-		play(item: FeedItem) {
-			// TODO: implement play audio/video
+		playAudio(item: FeedItem) {
+			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, { item })
+		},
+		stopAudio() {
+			const audioElements = document.getElementsByTagName('audio')
+
+			for (let i = 0; i < audioElements.length; i++) {
+				audioElements[i].pause()
+			}
 		},
 	},
 })
@@ -202,6 +218,21 @@ export default Vue.extend({
 		height: 100%;
 	}
 
+	.article video {
+		width: 100%;
+		background-size: cover;
+	}
+
+	.article .enclosure.video {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.article .enclosure.video .download {
+		justify-content: center;
+		display: flex;
+	}
+
 	.article .body {
 		color: var(--color-main-text);
     font-size: 15px;
diff --git a/src/store/item.ts b/src/store/item.ts
index 14ae20658..2ff49f4d1 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -29,6 +29,7 @@ export type ItemState = {
 	allItems: FeedItem[];
 
 	selectedId?: string;
+	playingItem?: FeedItem
 }
 
 const state: ItemState = {
@@ -40,7 +41,9 @@ const state: ItemState = {
 	unreadCount: 0,
 
 	allItems: [],
+
 	selectedId: undefined,
+	playingItem: undefined,
 }
 
 const getters = {
@@ -290,6 +293,9 @@ export const mutations = {
 	[FEED_ITEM_MUTATION_TYPES.SET_SELECTED_ITEM](state: ItemState, { id }: { id: string }) {
 		state.selectedId = id
 	},
+	[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state: ItemState, { item }: { item?: FeedItem }) {
+		state.playingItem = item
+	},
 
 	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
 		if (items) {
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index 6da393c6a..b427821cd 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -20,7 +20,9 @@ export const FOLDER_MUTATION_TYPES = {
 export const FEED_ITEM_MUTATION_TYPES = {
 	SET_ITEMS: 'SET_ITEMS',
 	UPDATE_ITEM: 'UPDATE_ITEM',
+
 	SET_SELECTED_ITEM: 'SET_SELECTED_ITEM',
+	SET_PLAYING_ITEM: 'SET_PLAYING_ITEM',
 
 	SET_STARRED_COUNT: 'SET_STARRED_COUNT',
 	SET_UNREAD_COUNT: 'SET_UNREAD_COUNT',