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