[Vue Rewrite] Audio/Video playback from enclosures in FeedItem

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,26 +33,83 @@ 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: {
 		NcContent,
 		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)
 		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
 		// fetch starred to get starred count
 		await this.$store.dispatch(ACTIONS.FETCH_STARRED)
 	},
+	methods: {
+		stopPlaying() {
+			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, undefined)
+		},
+		stopVideo() {
+			const videoElements = document.getElementsByTagName('video')
+
+			for (let i = 0; i < videoElements.length; i++) {
+				videoElements[i].pause()
+			}
+		},
+	},
 })
 </script>
 
 <style>
 	.material-design-icon {
 		color: var(--color-text-lighter)
 	}
+
+	#news-app {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	#content-display {
+		display: flex;
+		flex-direction: row;
+		height: 100%;
+	}
+
+	#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>

src/components/feed-display/FeedItemDisplay.vue

@@ -53,34 +53,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" />
@@ -172,11 +177,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()
+			}
 		},
 	},
 })
@@ -197,6 +213,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;

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?: FeedItem) {
+		state.playingItem = item
+	},
 
 	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
 		if (items) {

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',

tests/javascript/unit/components/App.spec.ts

@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import App from '../../../../src/App.vue'
+import { MUTATIONS } from '../../../../src/store'
+
+describe('FeedItemDisplay.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	let wrapper: Wrapper<App>
+
+	const dispatchStub = jest.fn()
+	const commitStub = jest.fn()
+	beforeAll(() => {
+		wrapper = shallowMount(App, {
+			localVue,
+			mocks: {
+				$store: {
+					state: {
+						items: {
+							playingItem: undefined,
+						},
+					},
+					dispatch: dispatchStub,
+					commit: commitStub,
+				},
+			},
+		})
+	})
+
+	beforeEach(() => {
+		dispatchStub.mockReset()
+		commitStub.mockReset()
+	})
+
+	it('should send SET_PLAYING_ITEM with undefined to stop playback', () => {
+		(wrapper.vm as any).stopPlaying()
+
+		expect(commitStub).toBeCalledWith(MUTATIONS.SET_PLAYING_ITEM, undefined)
+	})
+
+	it('should stop all video elements in page when playing video', () => {
+		const pauseStub = jest.fn()
+		document.getElementsByTagName = jest.fn().mockReturnValue([{ pause: pauseStub }]);
+
+		(wrapper.vm as any).stopVideo()
+
+		expect(pauseStub).toBeCalled()
+	})
+})

tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts

@@ -72,7 +72,7 @@ describe('FeedItemDisplay.vue', () => {
 		expect(feed).toEqual(mockFeed)
 	})
 
-	it('toggles starred state', () => {
+	it('should toggle starred state', () => {
 		wrapper.vm.$props.item.starred = true;
 
 		(wrapper.vm as any).toggleStarred(wrapper.vm.$props.item)
@@ -88,5 +88,19 @@ describe('FeedItemDisplay.vue', () => {
 		})
 	})
 
-	// TODO: Audio/Video tests
+	it('should send SET_PLAYING_ITEM with item', () => {
+		const item = { id: 123 };
+		(wrapper.vm as any).playAudio(item)
+
+		expect(commitStub).toBeCalledWith(MUTATIONS.SET_PLAYING_ITEM, item)
+	})
+
+	it('should stop all audio elements in page when playing video', () => {
+		const pauseStub = jest.fn()
+		document.getElementsByTagName = jest.fn().mockReturnValue([{ pause: pauseStub }]);
+
+		(wrapper.vm as any).stopAudio()
+
+		expect(pauseStub).toBeCalled()
+	})
 })

tests/javascript/unit/store/item.spec.ts

@@ -129,6 +129,16 @@ describe('item.ts', () => {
 				expect(state.selectedId).toEqual(123)
 			})
 		})
+
+		describe('SET_PLAYING_ITEM', () => {
+			it('should update selectedId on state', async () => {
+				const state = { playingItem: undefined } as any
+				const item = { id: 123 } as any
+				mutations[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state, item as any)
+				expect(state.playingItem).toEqual(item)
+			})
+		})
+
 		describe('SET_ITEMS', () => {
 			it('should add feeds to state', () => {
 				const state = { allItems: [] as any } as any