Restore vjs

src/components/PsVideo.ts

@@ -1,4 +1,6 @@
 import PhotoSwipe from "photoswipe";
+import videojs from "video.js";
+import "video.js/dist/video-js.min.css";
 
 /**
  * Check if slide has video content
@@ -64,8 +66,25 @@ class VideoContentSetup {
 
     // do not append video on nearby slides
     pswp.on("appendHeavy", (e) => {
-      if (isVideoContent(e.slide) && !e.slide.isActive) {
+      if (isVideoContent(e.slide)) {
-        e.preventDefault();
+        if (!e.slide.isActive) {
+          e.preventDefault();
+        } else {
+          const content = <any>e.slide.content;
+          content.videojs = videojs(content.videoElement, {
+            fluid: true,
+            autoplay: true,
+            controls: true,
+            sources: [{ src: e.slide.data.src }],
+            preload: "metadata",
+            inactivityTimeout: 0,
+            html5: {
+              vhs: {
+                withCredentials: true,
+              },
+            },
+          });
+        }
       }
     });
 
@@ -169,28 +188,31 @@ class VideoContentSetup {
     content.state = "loading";
     content.type = "video"; // TODO: move this to pswp core?
 
-    content.element = document.createElement("video");
+    content.videoElement = document.createElement("video");
+    content.videoElement.className = "video-js";
+    content.videoElement.setAttribute("controls", "true");
 
     if (this.options.videoAttributes) {
       for (let key in this.options.videoAttributes) {
-        content.element.setAttribute(
+        content.videoElement.setAttribute(
           key,
           this.options.videoAttributes[key] || ""
         );
       }
     }
 
-    content.element.setAttribute("poster", content.data.msrc);
+    content.element = document.createElement("div");
-
-    this.preloadVideoPoster(content, content.data.msrc);
-
     content.element.style.position = "absolute";
     content.element.style.left = 0;
     content.element.style.top = 0;
+    content.element.style.width = "100%";
+    content.element.style.height = "100%";
 
-    if (content.data.src) {
+    // content.videoElement.setAttribute("poster", content.data.msrc);
-      content.element.src = content.data.src;
+    // this.preloadVideoPoster(content, content.data.msrc);
-    }
+    content.onLoaded();
+
+    content.element.appendChild(content.videoElement);
   }
 
   preloadVideoPoster(content, src) {
@@ -209,15 +231,11 @@ class VideoContentSetup {
   }
 
   playVideo(content) {
-    if (content.element) {
+    content.videojs?.play();
-      content.element.play();
-    }
   }
 
   pauseVideo(content) {
-    if (content.element) {
+    content.videojs?.pause();
-      content.element.pause();
-    }
   }
 
   useContentPlaceholder(usePlaceholder, content) {

src/components/Viewer.vue

@@ -831,6 +831,10 @@ export default class Viewer extends Mixins(GlobalMixin) {
   width: inherit;
 }
 
+:deep .video-js .vjs-big-play-button {
+  display: none;
+}
+
 :deep .pswp {
   .pswp__zoom-wrap {
     width: 100%;