niemes
/
domplayer


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
							<!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/js/player.js"></script>
  <script type="module" src="./assets/js/domUtils.js"></script>
  <script type="module" src="./assets/dom/renderers/FullDomeRenderer.js"></script>
  <!-- <script src="./scenes/video.js"></script> -->

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

  <!-- 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">

  <link rel="stylesheet" type="text/css" href="./assets/css/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="./assets/css/fontawesome.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">

      <!-- ---___---_______---___---___---________--____---___--___ TABS CONFIG -->
      <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" id="viewControls">

          <div>
            <button id="center" class="button is-small is-light" onclick="window.utils.centerVideo()">
              <span class="icon is-small"><i class="fas fa-arrows-to-dot"></i></span>
            </button>
          </div>

          <div id="playerControls">
            <button id="play" active="false" class="button is-small is-light" onclick="window.control('play', this)">
              <span class="icon is-small"><i class="fas fa-play"></i></span>
            </button>
            <button id="pause" active="false" class="button is-small is-light" onclick="window.control('pause', this)">
              <span class="icon is-small"><i class="fas fa-pause"></i></span>
            </button>
            <button id="previous" active="false" class="button is-small is-light"
              onclick="window.control('previous', this)">
              <span class="icon is-small"><i class="fas fa-backward"></i></span>
            </button>
            <button id="next" active="false" class="button is-small is-light" onclick="window.control('next', this)">
              <span class="icon is-small"><i class="fas fa-forward"></i></span>
              <button id="loop" active="false" class="button is-small is-light" onclick="window.control('loop', this)">
                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
              </button>
          </div>

        </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="window.player.playlist.addVideo()">
              Add Video
            </button>
          </div>
        </div>
      </div>

      <!-- -___---___---___--____--____--__---___--___--___--___--___--___--- Controls TAB -->
      <div class="" data-content="2">

        <a class="panel-block is-active">
          <div class="card">
            <div class="card-content">
              <p class="title title is-5">Controls tab</p>
              <p class="subtitle is-6">
                Work In Progress :
              </p>
              <p>
                Need to add the differents controls for the Dom mode.
              
              </p>
          </div>

          <div class="dropdown is-active">
            <div class="dropdown-trigger">
              <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
                <span>Dome type</span>
                <span class="icon is-small">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu" role="menu">
              <div class="dropdown-content">
                <a href="#" class="dropdown-item">
                  Half Dome
                </a>
                <a class="dropdown-item">
                  Full Dome
                </a>
                <a href="#" class="dropdown-item is-active">
                  Active dropdown item
                </a>
                <a href="#" class="dropdown-item">
                  Other dropdown item
                </a>
                <hr class="dropdown-divider">
                <a href="#" class="dropdown-item">
                  With a divider
                </a>
              </div>
            </div>
          </div>

        </div>
        </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>


  </script>

</body>

</html>