fix: plyr controls querySelectorAll

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

css/init-x4ybIV8G.chunk.css css/init-DdG1tait.chunk.csscss/init-x4ybIV8G.chunk.css renamed to css/init-DdG1tait.chunk.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-x4ybIV8G.chunk.css';
+@import './init-DdG1tait.chunk.css';
 @import './viewerAction-6cpbKhU6.chunk.css';
 @import './NcActionButton-DyH89PpO.chunk.css';
 @import './NcActionLink-Cay-IPuV.chunk.css';

css/viewer-init.css

@@ -93,9 +93,16 @@ export default {
 		},
 	},
 
-	mounted() {
+	// for some reason the video controls don't get mounted to the dom until after the component (Videos) is mounted,
+	// using the mounted() hook will leave us with an empty array
+	updated() {
 		// Prevent swiping to the next/previous item when scrubbing the timeline or changing volume
-		[...this.$el.querySelectorAll('.plyr__controls__item')].forEach(control => {
+		const plyrControls = this.$el.querySelectorAll('.plyr__controls__item')
+		if (!plyrControls || !plyrControls.length) {
+			return
+		}
+
+		[...plyrControls].forEach(control => {
 			if (!control?.addEventListener) {
 				return
 			}

js/viewer-init.mjs

@@ -117,12 +117,16 @@ export default {
 			}
 		},
 	},
+
 	// for some reason the video controls don't get mounted to the dom until after the component (Videos) is mounted,
 	// using the mounted() hook will leave us with an empty array
-
 	updated() {
 		// Prevent swiping to the next/previous item when scrubbing the timeline or changing volume
-		[...this.$el.querySelectorAll('.plyr__controls__item')].forEach(control => {
+		const plyrControls = this.$el.querySelectorAll('.plyr__controls__item')
+		if (!plyrControls || !plyrControls.length) {
+			return
+		}
+		[...plyrControls].forEach(control => {
 			if (control.getAttribute('data-plyr') === 'fullscreen') {
 				control.addEventListener('click', this.hideHeaderAndFooter)
 			}