Videos: Unload player on close #979

frontend/src/component/photo/viewer.vue

@@ -187,7 +187,7 @@ export default {
     },
     closePlayer() {
       if (this.$refs.player) {
-        this.$refs.player.pause();
+        this.$refs.player.stop();
       }
 
       this.player.show = false;

frontend/src/component/video/player.vue

@@ -82,11 +82,11 @@ export default {
   },
   beforeDestroy() {
     document.body.classList.remove("player");
-    this.remove();
+    this.stop();
   },
   methods: {
     videoEl() {
-      return this.$refs.video.$el;
+      return this.$el.childNodes[0];
     },
     updateStyle() {
       this.style = `width: ${this.width.toString()}px; height: ${this.height.toString()}px`;
@@ -95,12 +95,6 @@ export default {
     render() {
       this.updateStyle();
     },
-    remove() {
-      const el = this.videoEl();
-      if (!el) return;
-
-      this.videoEl().pause();
-    },
     fullscreen() {
       const el = this.videoEl();
       if (!el) return;
@@ -127,6 +121,15 @@ export default {
 
       el.pause();
     },
+    stop() {
+      const el = this.videoEl();
+      if (!el) return;
+
+      el.pause();
+      el.src = "";
+      el.poster = "";
+      el.load();
+    },
   },
 };
 </script>

frontend/src/dialog/video/viewer.vue

@@ -29,12 +29,12 @@ export default {
     this.subscriptions['player.pause'] = Event.subscribe('player.pause', this.onPause);
     this.subscriptions['player.close'] = Event.subscribe('player.close', this.onClose);
   },
-  destroyed() {
-    this.onPause();
-
+  beforeDestroy() {
     for (let i = 0; i < this.subscriptions.length; i++) {
       Event.unsubscribe(this.subscriptions[i]);
     }
+
+    this.onClose();
   },
   methods: {
     onOpen(ev, params) {
@@ -52,7 +52,7 @@ export default {
     },
     onClose() {
       if (this.$refs.player) {
-        this.$refs.player.pause();
+        this.$refs.player.stop();
       }
 
       this.show = false;