niemes
/
domplayer


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!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>
  <script type="text/javascript" src="./assets/js/libs/bulma-toast.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" type="module"></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" id="headerTopbar">
      <img src="./assets/domPlayer.png" id="logo">
      DomPlayer Options
    </p>
    <p class="panel-tabs" id="tabs">
      <a class="is-active" data-tab="1">Config</a>
      <a data-tab="2">Controls</a>
      <a data-tab="3">Help</a>
      <a data-tab="4">About</a>
    </p>

    <div id="tab-content">

      <div class="is-active" data-content="1">
        <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>
      </div>
  
      <div class="" data-content="2">
        <p></p> controls tab
        <a class="panel-block is-active">CONTROLS tab</a>
      </div>
    
      <div class="" data-content="3">
        <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>
  
            <p class="subtitle is-6">
              compatible Videos format
            </p>
            <p>
              All web video formats :
              mkv / avi / mp4 / m4v / webv / ogv
            </p>
          </div>
        </div>
      </div>
  
      <div class="" data-content="4">
        <a class="panel-block is-active">ABOUT</a>
        <div class="card">
          <div class="card-image">
            <figure class="is-4by3 logoAbout">
              <img src="./assets/icon_512x512.png" alt="logo domPlayer" style="width: 150px;height: 150px;">
            </figure>
          </div>
          <div class="card-content">
            <p class="title title is-5">
              DomPlayer
            </p>
            <p class="subtitle is-6">
              Version v1.0.1
            </p>
            <p>
              Domplayer allow you to easely play a video on an half dome and set the size en position of
              the video. 
            </p>
          </div>
          <footer class="card-footer">
            <a href="https://niemes.info"" class="card-footer-item">
              <span>Made with <span>
                <span class="icon is-small">
                  <i class="fas fa-heart"></i>
                </span>
                <span>by Niemeskern Kévin</span>
            </a>
          </footer>
        </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-small is-info" value="45" max="100">45%</progress>
  </div>

  <script src="./assets/js/positions.js"></script>

  <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
      }
    }

    function miam(mess, type){
      bulmaToast.toast({
        message: mess, 
        type: type,
        dismissible: true,
        duration: 1000,
        position: "top-left",
        "single": false,
        // animate: { in: 'fadeIn', out: 'fadeOut' }
      })
    }
    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
          // notif("success", "mute", videoPlayer.muted)
          miam( videoPlayer.muted ? "Mute" : "Unmute", 'is-primary' )
        }

        if (event.key == " ") { // space for pause
          if (!videoPlayer.paused) {
            videoPlayer.pause()
            miam('Video Paused.','is-primary')
          }
          else {
            videoPlayer.play()
            miam('Video is playing.','is-primary')
          }
          
        }

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

</body>

</html>