Cleanup and manage video errors (#94)

Cleanup and manage video errors

src/components/Videos.vue

@@ -22,36 +22,35 @@
 
 <template>
 	<video
-		v-if="path && canPlay"
+		v-if="path"
 		:autoplay="active"
 		:controls="visibleControls"
 		:poster="livePhotoPath"
 		:preload="true"
+		:src="davPath"
 		:style="{
 			height: height + 'px',
 			width: width + 'px'
 		}"
-		@canplay="doneLoading"
+		@ended="donePlaying"
 		@click.prevent="playPause"
 		@dblclick.prevent="toggleFullScreen"
-		@ended="donePlaying"
+		@canplay="doneLoading"
-		@loadedmetadata="updateVideoSize"
 		@mouseenter="showControls"
-		@mouseleave="hideControls">
+		@mouseleave="hideControls"
+		@loadedmetadata="updateVideoSize">
 
-		<source :src="davPath" :type="mime">
+		<!-- Omitting `type` on purpose because most of the
+			browsers auto detect the appropriate codec.
+			Having it set force the browser to comply to
+			the provided mime instead of detecting a potential
+			compatibility. -->
 
 		{{ t('viewer', 'Your browser does not support the video tag.') }}
 	</video>
-
-	<!-- Browser cannot play this file -->
-	<Error v-else>
-		{{ t('viewer', 'This video is not playable in your browser') }}
-	</Error>
 </template>
 
 <script>
-import Error from 'Components/Error'
 import Mime from 'Mixins/Mime'
 import PreviewUrl from 'Mixins/PreviewUrl'
 
@@ -60,15 +59,10 @@ const liveExt = ['jpg', 'jpeg', 'png']
 export default {
 	name: 'Videos',
 
-	components: {
-		Error
-	},
-
 	mixins: [Mime, PreviewUrl],
 
 	data() {
 		return {
-			canPlay: true,
 			visibleControls: false
 		}
 	},
@@ -77,12 +71,13 @@ export default {
 		livePhoto() {
 			return this.fileList.find(file => {
 				// if same filename and extension is allowed
-				return file.name.startsWith(this.name)
+				return file.href !== this.davPath
-					&& liveExt.indexOf(file.name.split('.')[1] > -1)
+					&& file.name.startsWith(this.name)
+					&& liveExt.indexOf(file.name.split('.')[1]) > -1
 			})
 		},
 		livePhotoPath() {
-			return this.getPreviewIfAny(this.livePhoto)
+			return this.livePhoto && this.getPreviewIfAny(this.livePhoto)
 		}
 	},
 
@@ -90,25 +85,15 @@ export default {
 		active: function(val, old) {
 			// the item was hidden before and is now the current view
 			if (val === true && old === false) {
-				// if we cannot play the file, we announce we're done loading
+				this.$el.play()
-				this.canPlayCheck()
-				if (this.canPlay) {
-					this.$el.play()
-				}
 
 			// the item was playing before and is now hidden
 			} else if (val === false && old === true) {
-				if (this.canPlay) {
+				this.$el.pause()
-					this.$el.pause()
-				}
 			}
 		}
 	},
 
-	mounted() {
-		this.canPlayCheck()
-	},
-
 	methods: {
 		// Updates the dimensions of the modal
 		updateVideoSize() {
@@ -138,16 +123,6 @@ export default {
 			// reset and show poster after play
 			this.$el.autoplay = false
 			this.$el.load()
-		},
-
-		canPlayCheck() {
-			if (this.$el.canPlayType
-				&& this.$el.canPlayType(this.mime) !== '') {
-				this.canPlay = true
-			} else {
-				this.canPlay = false
-				this.doneLoading()
-			}
 		}
 	}
 }

src/models/file.js

@@ -0,0 +1,32 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default function(fileInfo, mime, component) {
+	this.path = fileInfo.href
+	this.id = fileInfo.id
+	this.name = fileInfo.name
+	this.hasPreview = fileInfo.hasPreview
+	this.mime = mime
+	this.modal = component
+	this.failed = false
+	this.loaded = false
+}

src/views/Viewer.vue

@@ -31,7 +31,7 @@
 		:spread-navigation="true"
 		:has-previous="hasPrevious"
 		:has-next="hasNext"
-		:title="currentFileName"
+		:title="currentFile.name"
 		:enable-swipe="canSwipe"
 		:size="isMobile || isFullscreen ? 'full' : 'large'"
 		:style="{width: showSidebar ? `calc(100% - ${sidebarWidth}px)` : null}"
@@ -41,7 +41,7 @@
 		<!-- PREVIOUS -->
 		<component
 			:is="previousFile.modal"
-			v-if="!previousFile.failed"
+			v-if="previousFile && !previousFile.failed"
 			:key="getPreviewIfAny(previousFile)"
 			ref="previous-content"
 			:dav-path="previousFile.path"
@@ -53,8 +53,9 @@
 			class="hidden-visually file-view"
 			@error="previousFailed" />
 		<Error
-			v-else
+			v-else-if="previousFile"
-			class="hidden-visually" />
+			class="hidden-visually"
+			:name="previousFile.name" />
 
 		<!-- CURRENT -->
 		<component
@@ -77,12 +78,12 @@
 			@error="currentFailed" />
 		<Error
 			v-else
-			:name="currentFileName" />
+			:name="currentFile.name" />
 
 		<!-- NEXT -->
 		<component
 			:is="nextFile.modal"
-			v-if="!nextFile.failed"
+			v-if="nextFile && !nextFile.failed"
 			:key="getPreviewIfAny(nextFile)"
 			ref="next-content"
 			:dav-path="nextFile.path"
@@ -94,7 +95,7 @@
 			class="hidden-visually file-view"
 			@error="nextFailed" />
 		<Error
-			v-else
+			v-else-if="nextFile"
 			class="hidden-visually" />
 	</Modal>
 </template>
@@ -107,6 +108,7 @@ import { generateRemoteUrl } from 'nextcloud-server/dist/router'
 
 import Error from 'Components/Error'
 import PreviewUrl from 'Mixins/PreviewUrl'
+import File from 'Models/file'
 import FileList from 'Services/FileList'
 import Modal from 'nextcloud-vue/dist/Components/Modal'
 
@@ -154,12 +156,6 @@ export default {
 		hasNext() {
 			return this.fileList.length > 1
 		},
-		currentFileName() {
-			if (this.currentFile) {
-				return this.currentFile.name
-			}
-			return ''
-		},
 		actions() {
 			return OCA.Sharing
 				? [
@@ -209,13 +205,10 @@ export default {
 		 * @param {Object} fileInfo the opened file info
 		 */
 		async openFile(fileName, fileInfo) {
-			this.failed = false
-
 			// prevent scrolling while opened
 			document.body.style.overflow = 'hidden'
 
 			const relativePath = `${fileInfo.dir !== '/' ? fileInfo.dir : ''}/${fileName}`
-			const path = `${this.root}${relativePath}`
 
 			let mime = fileInfo.$file.data('mime')
 
@@ -243,19 +236,11 @@ export default {
 			mime = this.getAliasIfAny(mime)
 
 			if (this.components[mime]) {
-				this.currentFile = {
+				this.currentFile = new File(fileInfo, mime, this.components[mime])
-					relativePath,
-					path,
-					mime,
-					hasPreview: fileInfo.hasPreview,
-					id: fileInfo.id,
-					name: fileInfo.name,
-					modal: this.components[mime],
-					loaded: false
-				}
 				this.updatePreviousNext()
 			} else {
-				console.error(`The following file could not be displayed because to view matches its mime type`, fileName, fileInfo)
+				console.error(`The following file could not be displayed`, fileName, fileInfo)
+				this.currentFile.failed = true
 			}
 		},
 
@@ -265,24 +250,9 @@ export default {
 		 * @param {Object} fileInfo the opened file info
 		 */
 		openFileFromList(fileInfo) {
-			const path = fileInfo.href
+			// override mimetype if existing alias
-			const id = fileInfo.id
-			const name = fileInfo.name
-			const hasPreview = fileInfo.hasPreview
 			const mime = this.getAliasIfAny(fileInfo.mimetype)
-			const modal = this.components[mime]
+			this.currentFile = new File(fileInfo, mime, this.components[mime])
-			if (modal) {
-				this.currentFile = {
-					path,
-					mime,
-					id,
-					name,
-					hasPreview,
-					modal,
-					failed: false,
-					loaded: false
-				}
-			}
 			this.updatePreviousNext()
 		},
 
@@ -294,51 +264,23 @@ export default {
 			const next = this.fileList[this.currentIndex + 1]
 
 			if (prev) {
-				const path = prev.href
-				const id = prev.id
-				const name = prev.name
-				const hasPreview = prev.hasPreview
 				const mime = this.getAliasIfAny(prev.mimetype)
-				const modal = this.components[mime]
+				if (this.components[mime]) {
-
+					this.previousFile = new File(prev, mime, this.components[mime])
-				if (modal) {
-					this.previousFile = {
-						path,
-						mime,
-						id,
-						name,
-						hasPreview,
-						modal,
-						failed: false
-					}
 				}
-			// RESET
 			} else {
-				this.previousFile = {}
+				// RESET
+				this.previousFile = null
 			}
 
 			if (next) {
-				const path = next.href
-				const id = next.id
-				const name = next.name
-				const hasPreview = next.hasPreview
 				const mime = this.getAliasIfAny(next.mimetype)
-				const modal = this.components[mime]
+				if (this.components[mime]) {
-
+					this.nextFile = new File(next, mime, this.components[mime])
-				if (modal) {
-					this.nextFile = {
-						path,
-						mime,
-						id,
-						name,
-						hasPreview,
-						modal,
-						failed: false
-					}
 				}
-			// RESET
 			} else {
-				this.nextFile = {}
+				// RESET
+				this.nextFile = null
 			}
 
 		},
@@ -458,8 +400,6 @@ export default {
 		 * Open previous available file
 		 */
 		previous() {
-			this.failed = false
-
 			this.currentIndex--
 			if (this.currentIndex < 0) {
 				this.currentIndex = this.fileList.length - 1
@@ -472,8 +412,6 @@ export default {
 		 * Open next available file
 		 */
 		next() {
-			this.failed = false
-
 			this.currentIndex++
 			if (this.currentIndex > this.fileList.length - 1) {
 				this.currentIndex = 0