niemes
/
domplayer


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html>

<head>
  <title>DomPlayer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./assets/css/main.css">

  <!-- video Player dependencies -->
  <script src="./assets/dom/libs/three/three.js"></script>
  <script src="./assets/dom/libs/es6-collections.min.js"></script>
  <script src="./assets/dom/libs/es6-promise.min.js"></script>

  <!-- Utility code that may be used by all scenes -->
  <!-- <script src="./scenes/common.js"></script> -->
  <!-- <script src="./interact/js/DomeMaster.js"></script> -->
  <script type="module" src="./assets/js/playlist.js"></script>
  <script type="module" src="./assets/dom/renderers/FullDomeRenderer.js"></script>
  <!-- <script src="./scenes/video.js"></script> -->

  <!-- UI Dependencies & Drag and resize div using jqueryUI -->
  <link rel="stylesheet" href="./assets/css/bulma.min.css">
  <link rel="stylesheet" href="./assets/css/bulma_switch.css">
  <link rel="stylesheet" href="./assets/css/slider.min.css">
  <script type="text/javascript" src="./assets/js/libs/jquery.min.js"></script>
  <script type="text/javascript" src="./assets/js/libs/jquery-ui.js"></script>
  <script type="text/javascript" src="./assets/js/libs/bulma-slider.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./assets/css/jquery-ui.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="./assets/js/libs/Sortable.min.js"></script>

  <script>
    // console.log("INIT !")
    // if (typeof peerJsInit === "function") peerJsInit();
    
  </script>
  
  <div class="drag-widget-container" id="wrap">
  </div>
  <!-- Insert this line after script imports -->
  <script>if (window.module) module = window.module;</script>
  <script src="./renderer.js"></script>

  <script>

    var getAbsPosition = function(el){
        var el2 = el;
        var curtop = 0;
        var curleft = 0;
        if (document.getElementById || document.all) {
            do  {
                curleft += el.offsetLeft-el.scrollLeft;
                curtop += el.offsetTop-el.scrollTop;
                el = el.offsetParent;
                el2 = el2.parentNode;
                while (el2 != el) {
                    curleft -= el2.scrollLeft;
                    curtop -= el2.scrollTop;
                    el2 = el2.parentNode;
                }
            } while (el.offsetParent);

        } else if (document.layers) {
            curtop += el.y;
            curleft += el.x;
        }
        return [curtop, curleft];
    };


    $(document).ready(function() {
      let wrapLoca = document.getElementById('wrap')
      $("#wrap").draggable({
        drag: function(e, ui){
          let coords = getAbsPosition(wrapLoca)
          // console.log("Drag - top", coords[0], "left", coords[1])
          localStorage.setItem('playerTop', `${coords[0]}px`);
          localStorage.setItem('playerLeft', `${coords[1]}px`);
        },
      }).resizable({
        start: function(e, ui) {
          // alert('resizing started');
        },
        resize: function(e, ui) {
          // console.log("resize - width", wrapLoca.style.width, "height", wrapLoca.style.height)
          if(window.onWindowResize) window.onWindowResize(true)
          localStorage.setItem('playerWidth', wrapLoca.style.width);
          localStorage.setItem('playerHeight', wrapLoca.style.height);
        },
        stop: function(e, ui) {
          if(window.onWindowResize) window.onWindowResize(false)
          
        }
      });
    });
  </script>

</head>

<body>
  <div id="electron-titlebar" class="drag top-titlebar"  style="-webkit-app-region: drag">
    <nav style="-webkit-app-region: drag; -webkit-user-select: none;">
    </nav>
  </div>

  
  <div id="panel" class="panel is-primary container card">
    <p class="panel-heading">
      <img src="./assets/domPlayer.png" id="logo">
      DomPlayer Options
    </p>
    <p class="panel-tabs">
      <a class="is-active">All</a>
      <a>Config</a>
      <a>Controls</a>
      <a>help</a>
      <a>About</a>
      
    </p>

    <a class="panel-block is-active">
      <label class="panel-block">
        <div class="field">
          <input id="switchExample" type="checkbox" name="switchExample" class="switch is-small" checked="checked">
          <label for="switchExample">Half Dome mode</label>
        </div>
      </label>
    </a>
    <div class="panel-block">
      <button class="button is-small is-rounded" onclick="centerVideo()">
        <span class="icon is-small">
          <i class="fas fa-circle"></i>
        </span>
        <span>Center video</span> 
      </button>
    </div>
      <h2 class="title is-5 titles">Playlist</h2>

      <div class="card">
        <div class="card-content">
          <div class="content">
            <ul id='playlist'><h2 class="title is-5" id="emptyFlag""">Empty...</h2></ul>
          </div>
      </div>
    <div class="panel-block">
      <button class="button is-link is-outlined is-fullwidth" onclick="addVideo()">
        Add Video
      </button>
    </div>

    <div class="card">
      <div class="card-content">
        <p class="title title is-5">
          Info
        </p>
        <p class="subtitle is-6">
          Shortcuts
        </p>
        <ul id="shortcuts">
          <li>P - Open/close Panel</li>
          <li>M - Muted</li>
          <li>Space - pause/play Video</li>
        </ul>
      </div>
    </div>
  </div>
</div>

  <div id="controls">
    
    <input class="slider is-fullwidth has-output-tooltip" id="slidControl" step="1" min="0" max="100" value="50" type="range">
    <progress id="progressBar" class="progress is-info" value="45" max="100">45%</progress>
  </div>


  <script>
    let optionPanel = document.getElementById('panel')
    let progres = document.getElementById('controls')

    function hidepanel(bool){
      if (!bool) {
        optionPanel.style.right = "15px"
        optionPanel.style.opacity = 1
        progres.style.opacity = 1
      } else {
        optionPanel.style.right = "-315px"
        optionPanel.style.opacity = 0
        progres.style.opacity = 0
      }
    }

    document.addEventListener("keydown", function(event) {
      // console.log("event.key", event.key)
      let usedKeys = ["p", " ", "m"]

    if (usedKeys.indexOf(event.key) !== -1) { // touche - debug info
        event.preventDefault();

        if (event.key == "m" ) { // m for muted
          if (!videoPlayer.muted) videoPlayer.muted = true
          else videoPlayer.muted = false

        }
        
        if (event.key == " " ) { // space for pause
          if (!videoPlayer.paused) {
            videoPlayer.pause()
          } else {
            videoPlayer.play()
          }
        }

        if (event.key === "p") { // P for panel
          event.preventDefault();
          if(optionPanel.style.opacity == 0) hidepanel(false)
          else hidepanel(true)
        }
    }
});
  </script>
    
</body>

</html>