improve archi

assets/dom/renderers/FullDomeRenderer.js

@@ -21,8 +21,8 @@ let RendererConfig = {
         animate the viewpoint */
         rig:        null,
         near:       .01, // .1,
-        far:        1000,
-        cubeMapSize: 1024
+        far:        10000,
+        cubeMapSize: 2048 // default 1024
     },
     dome: {
         radius:             35.0 * feetToMeters / 2,
@@ -40,8 +40,8 @@ let RendererConfig = {
 // }
 
 /* Trick for inline strings for GLSL code:
-     http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript
- */
+    http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript
+*/
 Function.prototype.getComment = function() {
     var startComment = "/*!";
     var endComment = "*/";
@@ -326,10 +326,4 @@ if(window.onRendererReady) {
     window.onRendererReady();
 }
 
-window.onload = function () {
-    // initPlaylist()
-    // startAnimation()
-    window.onWindowResize(true)
-};
-
 export {initDom}

assets/js/domUtils.js

@@ -1,81 +1,88 @@
 // control panel hide/show
 // shortcuts 
+class Utils {
+    constructor(){
+        let self = this
+        this.optionPanel = document.getElementById('panel')
+        this.progres = document.getElementById('controls')
 
-
-let domUtils = function () {
-    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
+        this.centerVideo = function () {
+            let wrapLoca = document.getElementById('wrap')
+        
+            wrapLoca.style.left = `calc(50vw - ${wrapLoca.offsetWidth / 2}px)`
+            wrapLoca.style.top = `calc(50vh - ${wrapLoca.offsetHeight / 2}px)`
+            localStorage.setItem('playerTop', wrapLoca.style.top);
+            localStorage.setItem('playerLeft', wrapLoca.style.left);
         }
-    }
-
-    function miam(mess, type, duration = 1000, pos = "top-left") {
-        bulmaToast.toast({
-            message: mess,
-            type: type,
-            dismissible: true,
-            duration: duration,
-            position: pos,
-            "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')
+    
+        this.hidepanel = function(bool) {
+            if (!bool) {
+                self.optionPanel.style.right = "15px"
+                self.optionPanel.style.opacity = 1
+                self.progres.style.opacity = 1
+            } else {
+                self.optionPanel.style.right = "-315px"
+                self.optionPanel.style.opacity = 0
+                self.progres.style.opacity = 0
             }
-
-            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')
+        },
+    
+        this.miam = function(mess, type, duration = 1000, pos = "top-left") {
+            bulmaToast.toast({
+                message: mess,
+                type: type,
+                dismissible: true,
+                duration: duration,
+                position: pos,
+                "single": false,
+                // animate: { in: 'fadeIn', out: 'fadeOut' }
+            })
+        }
+    
+        this.initEvents = function(){
+            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
+                        console.log(videoPlayer)
+                        if (!videoPlayer.muted) videoPlayer.muted = true
+                        else videoPlayer.muted = false
+                        // notif("success", "mute", videoPlayer.muted)
+                        self.miam(videoPlayer.muted ? "Mute" : "Unmute", 'is-primary')
+                    }
+        
+                    if (event.key == " ") { // space for pause
+                        if (!videoPlayer.paused) {
+                            videoPlayer.pause()
+                            self.miam('Video Paused.', 'is-primary')
+                        }
+                        else {
+                            videoPlayer.play()
+                            self.miam('Video is playing.', 'is-primary')
+                        }
+        
+                    }
+        
+                    if (event.key === "p") { // P for panel
+                        event.preventDefault();
+                        if (self.optionPanel.style.opacity == 0) self.hidepanel(false)
+                        else self.hidepanel(true)
+                    }
                 }
-
-            }
-
-            if (event.key === "p") { // P for panel
-                event.preventDefault();
-                if (optionPanel.style.opacity == 0) hidepanel(false)
-                else hidepanel(true)
-            }
+            });
         }
-    });
 
-    function centerVideo(){
-        let wrapLoca = document.getElementById('wrap')
-    
-        wrapLoca.style.left = `calc(50vw - ${wrapLoca.offsetWidth / 2}px)`
-        wrapLoca.style.top = `calc(50vh - ${wrapLoca.offsetHeight / 2}px)`
-        localStorage.setItem('playerTop', wrapLoca.style.top);
-        localStorage.setItem('playerLeft', wrapLoca.style.left);
+        this.miam("Press 'P' to open the Menu.", 'is-info', 4000, "top-center")
     }
 
-    miam("Press 'P' to open the Menu.", 'is-info', 4000, "top-center")
+
+
+    
 }
 
 
-export { domUtils };
+export { Utils };

assets/js/player.js

@@ -52,7 +52,6 @@ class MainPlayer {
                 elem.setAttribute('active', swap)
                 localStorage.setItem('loop', swap);
 
-                console.log("swap", swap)
                 if (swap) elem.className = clactive
                 else elem.className = baseClass
             }
@@ -102,7 +101,6 @@ class MainPlayer {
                 delButton.className = "delete is-small"
 
                 delButton.addEventListener('dblclick', function (event) {
-                    console.log("db click")
                     removeVideo(event.srcElement.parentNode)
                 });
 
@@ -166,9 +164,6 @@ class MainPlayer {
 
                 if (playlistVideos.length !== 0) {
                     window.curVideo++;
-                    console.log("looping", looping)
-                    console.log("window.curVideo", window.curVideo, playlistVideos.length, window.curVideo < playlistVideos.length - 1)
-
                     // go to next video in the playlist
                     if (window.curVideo < playlistVideos.length) {
                         // console.log("try to switch no next video", playlistVideos[window.curVideo]);
@@ -177,12 +172,10 @@ class MainPlayer {
                     }
                     // last video of the playlist loop back to the begining.
                     else if (window.curVideo >= playlistVideos.length - 1&& looping == "true") {
-                        console.log("is looping ? !", looping)
                         window.curVideo = 0;
                         window.videoPlayer.src = playlistVideos[window.curVideo].getAttribute('path');
                         window.videoPlayer.play()
                     } else {
-                        console.log("playlist end")
                         window.curVideo = 0
                     }
                 } else {
@@ -190,14 +183,10 @@ class MainPlayer {
                     window.videoPlayer.play()
                 }
             }
-            console.log("init loop", this.config.loop())
-            this.button.loop.setAttribute('active', this.config.loop() ? "true" : "false")
 
-            console.log("test loop", this.config.loop() == "true" ? clactive : baseClass)
+            this.button.loop.setAttribute('active', this.config.loop() ? "true" : "false")
             this.button.loop.className = ""
             this.button.loop.className = this.config.loop() == "true" ? clactive : baseClass
-
-            console.log("className = ", this.button.loop.className)
         }
         
     }

assets/js/playlist.js

@@ -44,7 +44,6 @@ class Playlist {
                 delButton.className = "delete is-small"
         
                 delButton.addEventListener('click', function (event) {
-                    console.log("db click")
                     self.removeVideo(event.srcElement.parentNode)
                 });
         

index.html

@@ -24,15 +24,15 @@
   <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" />
+  <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>
@@ -85,7 +85,7 @@
         <div class="panel-block" id="viewControls">
 
           <div>
-            <button id="center" class="button is-small is-light" onclick="centerVideo()">
+            <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>
@@ -97,16 +97,17 @@
             <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)">
+            <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>
+              <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>
 
@@ -125,12 +126,58 @@
           </div>
         </div>
       </div>
-  
+
+      <!-- -___---___---___--____--____--__---___--___--___--___--___--___--- Controls TAB -->
       <div class="" data-content="2">
-        <p></p> controls tab
-        <a class="panel-block is-active">CONTROLS tab</a>
+
+        <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">
@@ -145,7 +192,7 @@
               <li>M - Muted</li>
               <li>Space - pause/play Video</li>
             </ul>
-  
+
             <p class="subtitle is-6">
               compatible Videos format
             </p>
@@ -156,7 +203,7 @@
           </div>
         </div>
       </div>
-  
+
       <div class="" data-content="4">
         <a class="panel-block is-active">ABOUT</a>
         <div class="card">
@@ -174,16 +221,16 @@
             </p>
             <p>
               Domplayer allow you to easely play a video on an half dome and set the size en position of
-              the video. 
+              the video.
             </p>
           </div>
           <footer class="card-footer">
-            <a href="https://niemes.info"" class="card-footer-item">
+            <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>
+                  <span class="icon is-small">
+                    <i class="fas fa-heart"></i>
+                  </span>
+                  <span>by Niemeskern Kévin</span>
             </a>
           </footer>
         </div>
@@ -203,9 +250,9 @@
 
   <script>
 
-    
+
   </script>
 
 </body>
 
-</html>
+</html>

renderer.js

@@ -9,17 +9,19 @@
     // init DomRenderer
     // domUtils
     
-import { domUtils } from './assets/js/domUtils.js'
+import { Utils } from './assets/js/domUtils.js'
 import { MainPlayer } from './assets/js/player.js'
 import { initDom } from './assets/dom/renderers/FullDomeRenderer.js'
 
-domUtils()
-
 let player = new MainPlayer()
 player.playlist.initPlaylist()
 player.initPlayer()
+
 initDom()
+let utils = new Utils()
+utils.initEvents()
 
+window.utils = utils
 window.player = player
 window.control = player.ctrlPlayer