From 46c295778783873b30157215b29c0053bca729f1 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Thu, 1 Aug 2019 11:27:53 +1000
Subject: [PATCH] Fix viewing jwplayer after non-jwplayer video

---
 .../scenes/SceneDetails/SceneMarkersPanel.tsx  |  2 +-
 .../scenes/ScenePlayer/ScenePlayer.tsx         | 18 ++++++++----------
 ui/v2/src/components/scenes/helpers.tsx        | 18 +++++++++++++++++-
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx
index 63f4e71b4..bf74b6281 100644
--- a/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx
+++ b/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx
@@ -40,7 +40,7 @@ export const SceneMarkersPanel: FunctionComponent<ISceneMarkersPanelProps> = (pr
   const sceneMarkerUpdate = StashService.useSceneMarkerUpdate();
   const sceneMarkerDestroy = StashService.useSceneMarkerDestroy();
 
-  const jwplayer = SceneHelpers.getJWPlayer();
+  const jwplayer = SceneHelpers.getPlayer();
 
   function onOpenEditor(marker: GQL.SceneMarkerDataFragment | null = null) {
     setIsEditorOpen(true);
diff --git a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
index f05a3537a..1b33408d5 100644
--- a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayer.tsx
@@ -29,6 +29,12 @@ export class VideoJSPlayer extends React.Component<IScenePlayerProps> {
   componentDidMount() {
     this.player = videojs(this.videoNode);
 
+    // dirty hack - make this player look like JWPlayer
+    this.player.seek = this.player.currentTime;
+    this.player.getPosition = this.player.currentTime;
+    
+    SceneHelpers.registerJSPlayer(this.player);
+
     this.player.src(this.props.scene.paths.stream);
 
     // hack duration
@@ -49,15 +55,6 @@ export class VideoJSPlayer extends React.Component<IScenePlayerProps> {
     };
 
     this.player.ready(() => {
-      // dirty hack - make this player look like JWPlayer
-      this.player.seek = this.player.currentTime;
-      this.player.getPosition = this.player.currentTime;
-
-      // hook it into the window function 
-      (window as any).jwplayer = () => {
-        return this.player;
-      }
-
       this.player.on("timeupdate", () => {
         this.props.onTime();
       });
@@ -73,6 +70,7 @@ export class VideoJSPlayer extends React.Component<IScenePlayerProps> {
   componentWillUnmount() {
     if (this.player) {
       this.player.dispose();
+      SceneHelpers.deregisterJSPlayer();
     }
   }
 
@@ -225,7 +223,7 @@ export class ScenePlayer extends React.Component<IScenePlayerProps, IScenePlayer
   }
 
   private onReady() {
-    this.player = SceneHelpers.getJWPlayer();
+    this.player = SceneHelpers.getPlayer();
     if (this.props.timestamp > 0) {
       this.player.seek(this.props.timestamp);
     }
diff --git a/ui/v2/src/components/scenes/helpers.tsx b/ui/v2/src/components/scenes/helpers.tsx
index 6749be137..3d7b0e3af 100644
--- a/ui/v2/src/components/scenes/helpers.tsx
+++ b/ui/v2/src/components/scenes/helpers.tsx
@@ -3,9 +3,12 @@ import {
 } from "@blueprintjs/core";
 import React, {  } from "react";
 import { Link } from "react-router-dom";
+import videojs from "video.js";
 import * as GQL from "../../core/generated-graphql";
 
 export class SceneHelpers {
+  private static videoJSPlayer: videojs.Player | null;
+
   public static maybeRenderStudio(
     scene: GQL.SceneDataFragment | GQL.SlimSceneDataFragment,
     height: number,
@@ -33,8 +36,21 @@ export class SceneHelpers {
     );
   }
 
+  public static registerJSPlayer(player : videojs.Player) {
+    this.videoJSPlayer = player;
+  }
+
+  public static deregisterJSPlayer() {
+    this.videoJSPlayer = null;
+  }
+
   public static getJWPlayerId(): string { return "main-jwplayer"; }
-  public static getJWPlayer(): any {
+  public static getPlayer(): any {
+    // return videoJSPlayer if it is set, otherwise use jwplayer()
+    if (this.videoJSPlayer) {
+      return this.videoJSPlayer;
+    }
+
     return (window as any).jwplayer("main-jwplayer");
   }
 }