111

WebApp/client/public/videoplayer/js/main.js

@@ -0,0 +1,156 @@
+import { VideoPlayer } from "./video-player.js";
+import { registerGamepadEvents, registerKeyboardEvents, registerMouseEvents, sendClickEvent } from "./register-events.js";
+import { getServerConfig } from "../../js/config.js";
+
+setup();
+
+let playButton;
+let videoPlayer;
+let useWebSocket;
+
+window.document.oncontextmenu = function () {
+  return false;     // cancel default menu
+};
+
+window.addEventListener('resize', function () {
+  videoPlayer.resizeVideo();
+}, true);
+
+window.addEventListener('beforeunload', async () => {
+  await videoPlayer.stop();
+}, true);
+
+async function setup() {
+  const res = await getServerConfig();
+  useWebSocket = res.useWebSocket;
+  showWarningIfNeeded(res.startupMode);
+  showPlayButton();
+}
+
+function showWarningIfNeeded(startupMode) {
+  const warningDiv = document.getElementById("warning");
+  if (startupMode == "private") {
+    warningDiv.innerHTML = "<h4>Warning</h4> This sample is not working on Private Mode.";
+    warningDiv.hidden = false;
+  }
+}
+
+function showPlayButton() {
+  if (!document.getElementById('playButton')) {
+    let elementPlayButton = document.createElement('img');
+    elementPlayButton.id = 'playButton';
+    elementPlayButton.src = 'images/Play.png';
+    elementPlayButton.alt = 'Start Streaming';
+    playButton = document.getElementById('player').appendChild(elementPlayButton);
+    playButton.addEventListener('click', onClickPlayButton);
+  }
+}
+
+function onClickPlayButton() {
+
+  playButton.style.display = 'none';
+
+  const playerDiv = document.getElementById('player');
+
+  // add video player
+  const elementVideo = document.createElement('video');
+  elementVideo.id = 'Video';
+  elementVideo.style.touchAction = 'none';
+  playerDiv.appendChild(elementVideo);
+
+  // add video thumbnail
+  const elementVideoThumb = document.createElement('video');
+  elementVideoThumb.id = 'VideoThumbnail';
+  elementVideoThumb.style.touchAction = 'none';
+  playerDiv.appendChild(elementVideoThumb);
+
+  setupVideoPlayer([elementVideo, elementVideoThumb]).then(value => videoPlayer = value);
+
+  // add blue button
+  const elementBlueButton = document.createElement('button');
+  elementBlueButton.id = "blueButton";
+  elementBlueButton.innerHTML = "Light on";
+  playerDiv.appendChild(elementBlueButton);
+  elementBlueButton.addEventListener("click", function () {
+    sendClickEvent(videoPlayer, 1);
+  });
+
+  // add green button
+  const elementGreenButton = document.createElement('button');
+  elementGreenButton.id = "greenButton";
+  elementGreenButton.innerHTML = "Light off";
+  playerDiv.appendChild(elementGreenButton);
+  elementGreenButton.addEventListener("click", function () {
+    sendClickEvent(videoPlayer, 2);
+  });
+
+  // add orange button
+  const elementOrangeButton = document.createElement('button');
+  elementOrangeButton.id = "orangeButton";
+  elementOrangeButton.innerHTML = "Play audio";
+  playerDiv.appendChild(elementOrangeButton);
+  elementOrangeButton.addEventListener("click", function () {
+    sendClickEvent(videoPlayer, 3);
+  });
+
+  // add fullscreen button
+  const elementFullscreenButton = document.createElement('img');
+  elementFullscreenButton.id = 'fullscreenButton';
+  elementFullscreenButton.src = 'images/FullScreen.png';
+  playerDiv.appendChild(elementFullscreenButton);
+  elementFullscreenButton.addEventListener("click", function () {
+    if (!document.fullscreenElement || !document.webkitFullscreenElement) {
+      if (document.documentElement.requestFullscreen) {
+        document.documentElement.requestFullscreen();
+      }
+      else if (document.documentElement.webkitRequestFullscreen) {
+        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      } else {
+        if (playerDiv.style.position == "absolute") {
+          playerDiv.style.position = "relative";
+        } else {
+          playerDiv.style.position = "absolute";
+        }
+      }
+    }
+  });
+  document.addEventListener('webkitfullscreenchange', onFullscreenChange);
+  document.addEventListener('fullscreenchange', onFullscreenChange);
+
+  function onFullscreenChange() {
+    if (document.webkitFullscreenElement || document.fullscreenElement) {
+      playerDiv.style.position = "absolute";
+      elementFullscreenButton.style.display = 'none';
+    }
+    else {
+      playerDiv.style.position = "relative";
+      elementFullscreenButton.style.display = 'block';
+    }
+  }
+}
+
+async function setupVideoPlayer(elements) {
+  const videoPlayer = new VideoPlayer(elements);
+  await videoPlayer.setupConnection(useWebSocket);
+
+  videoPlayer.ondisconnect = onDisconnect;
+  registerGamepadEvents(videoPlayer);
+  registerKeyboardEvents(videoPlayer);
+  registerMouseEvents(videoPlayer, elements[0]);
+
+  return videoPlayer;
+}
+
+function onDisconnect() {
+  const playerDiv = document.getElementById('player');
+  clearChildren(playerDiv);
+  videoPlayer.stop();
+  videoPlayer = null;
+  showPlayButton();
+}
+
+function clearChildren(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+}