[stable19] Fix player controls on Firefox

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
 	globals: {
 		appVersion: true,
 		isTesting: true,
+		PLYR_ICONS: true,
 	},
 	extends: [
 		'@nextcloud',

src/components/Videos.vue

@@ -53,7 +53,6 @@
 <script>
 import Vue from 'vue'
 import VuePlyr from 'vue-plyr'
-import { generateFilePath } from '@nextcloud/router'
 
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
@@ -81,7 +80,7 @@ export default {
 		options() {
 			return {
 				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'],
-				iconUrl: generateFilePath('viewer', 'img', 'plyr.svg'),
+				loadSprite: false,
 			}
 		},
 	},

src/main.js

@@ -53,6 +53,13 @@ const ViewerRoot = document.createElement('div')
 ViewerRoot.id = 'viewer'
 document.body.appendChild(ViewerRoot)
 
+// Put controls for video viewer
+// Needed as Firefox CSP blocks the loading of the svg through the normal plyr system
+const VideoControls = document.createElement('div')
+VideoControls.innerHTML = PLYR_ICONS
+VideoControls.style.display = 'none'
+document.body.appendChild(VideoControls)
+
 // Init vue
 export default new Vue({
 	el: '#viewer',

webpack.js

@@ -1,9 +1,12 @@
+const fs = require('fs')
+const path = require('path')
 const { merge } = require('webpack-merge')
 const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 
 const isTesting = !!process.env.TESTING
+const plyrIcons = fs.readFileSync(path.join('node_modules', 'plyr', 'dist', 'plyr.svg'), { encoding: 'utf8' })
 
 const config = {
 	module: {
@@ -27,7 +30,10 @@ const config = {
 		],
 	},
 	plugins: [
-		new webpack.DefinePlugin({ isTesting }),
+		new webpack.DefinePlugin({
+			isTesting,
+			PLYR_ICONS: JSON.stringify(plyrIcons),
+		}),
 	],
 }