Add tabs + notifications

assets/css/main.css

@@ -83,6 +83,18 @@ canvas {
     border-bottom-right-radius: 3%;
     border-bottom-left-radius: 3%; */
 }
+#tab-content > div {
+    display: none;
+}
+
+#tab-content > div.is-active {
+    display: block;
+}
+.logoAbout{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .titles{
     padding-left: 15px;
 }
@@ -214,4 +226,43 @@ button:hover, #addVideo:hover{
     left: 0;
     z-index: 999999;
     opacity: 0;
+}
+
+
+
+/* -_--____--____---___---___ NOTIFICATIONS */
+
+.note{
+    visibility: hidden;
+    opacity:0;
+    box-shadow:0 0 15px rgba(0, 0, 0, 0.33);
+    min-width: 200px;
+    width:50%;
+    margin:16px auto;
+    padding: .5em 2em;
+    top:-100px;
+    left:0;
+    right:0;
+    position:fixed;
+    transition: opacity 0.2s, top 0.2s, visibility 0.2s;
+    transition-timing-function: ease-in;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.note-visible{
+    top:0px;
+    opacity: 1;
+    visibility: visible;
+}
+
+.note-title{
+    font-size: 1.25em;
+    font-weight: bold;
+    text-align: center;
+}
+
+.note-content{
+    font-size:1em;
 }

assets/dom/renderers/FullDomeRenderer.js

@@ -245,9 +245,9 @@ function setupScene(scene) {
     }
     // iOS require the video to start muted in order for it to autoplay, so we use a click
     // to enable the sound.
-    document.getElementsByTagName("canvas")[0].addEventListener("click",
-        function() {window.videoPlayer.muted = false;}
-    );
+    // document.getElementsByTagName("canvas")[0].addEventListener("click",
+    //     function() {window.videoPlayer.muted = false;}
+    // );
 
     var texture = new THREE.VideoTexture( window.videoPlayer );
     texture.minFilter = THREE.LinearFilter;

assets/js/positions.js

@@ -23,7 +23,6 @@ var getAbsPosition = function (el) {
     return [curtop, curleft];
 };
 
-
 $(document).ready(function () {
     let wrapLoca = document.getElementById('wrap')
     $("#wrap").draggable({
@@ -48,4 +47,42 @@ $(document).ready(function () {
 
         }
     });
-});
+
+});
+
+const TABS = [...document.querySelectorAll('#tabs a')];
+const CONTENT = [...document.querySelectorAll('#tab-content div')];
+const ACTIVE_CLASS = 'is-active';
+
+function initTabs() {
+    TABS.forEach((tab) => {
+        tab.addEventListener('click', (e) => {
+            let selected = tab.getAttribute('data-tab');
+            updateActiveTab(tab);
+            updateActiveContent(selected);
+        })
+    })
+}
+
+function updateActiveTab(selected) {
+    TABS.forEach((tab) => {
+        if (tab && tab.classList.contains(ACTIVE_CLASS)) {
+            tab.classList.remove(ACTIVE_CLASS);
+        }
+    });
+    selected.classList.add(ACTIVE_CLASS);
+}
+
+function updateActiveContent(selected) {
+    CONTENT.forEach((item) => {
+        if (item && item.classList.contains(ACTIVE_CLASS)) {
+            item.classList.remove(ACTIVE_CLASS);
+        }
+        let data = item.getAttribute('data-content');
+        if (data === selected) {
+            item.classList.add(ACTIVE_CLASS);
+        }
+    });
+}
+
+initTabs();

index.html

@@ -25,110 +25,166 @@
   <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/xNotif.js"></script>
-  <link rel="stylesheet" type="text/css" href="./assets/css/jquery-ui.css"/>
+  <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" />
+    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 src="./renderer.js" type="module"></script>
 
 </head>
 
 <body>
-  <div id="electron-titlebar" class="drag top-titlebar"  style="-webkit-app-region: drag">
+  <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">
 
+
+    <p class="panel-heading" id="headerTopbar">
       <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 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>
 
-    <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 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>
-      </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>
+        <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="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 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>
+
 
   <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>
+    <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 src="./assets/js/positions.js"></script>
 
   <script>
-    const Notify = new XNotify("TopLeft");
+
     let optionPanel = document.getElementById('panel')
     let progres = document.getElementById('controls')
 
-    function hidepanel(bool){
+
+    function hidepanel(bool) {
       if (!bool) {
         optionPanel.style.right = "15px"
         optionPanel.style.opacity = 1
@@ -140,32 +196,52 @@
       }
     }
 
-    document.addEventListener("keydown", function(event) {
+    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
+      if (usedKeys.indexOf(event.key) !== -1) { // touche - debug info
         event.preventDefault();
 
-        if (event.key == "m" ) { // m for muted
+        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()
-          else videoPlayer.play()
+
+        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)
+          if (optionPanel.style.opacity == 0) hidepanel(false)
           else hidepanel(true)
         }
-    }
-});
+      }
+    });
   </script>
-    
+
 </body>
 
-</html>
+</html>

renderer.js

@@ -4,6 +4,7 @@
 // `nodeIntegration` is turned off. Use `preload.js` to
 // selectively enable features needed in the rendering
 // process.
+
 function centerVideo(){
     let wrapLoca = document.getElementById('wrap')
 
@@ -18,15 +19,16 @@ let currentPlaylist = []
 function addVideo(){
     
     const dialogConfig = {
-        title: 'Select a file',
-        buttonLabel: 'This one will do',
+        title: 'Select video files',
+        buttonLabel: 'Validate Selection',
+        filters: [
+            { name: 'Movies', extensions: ['mkv', 'avi', 'mp4', "m4v", "webm", "ogv"] }
+        ],
         properties: ['openFile', 'multiSelections']
     };
     
     electron.openDialog('showOpenDialog', dialogConfig)
     .then( (result) => {
-        // console.log(result)
-        // console.log('urlPath video local', result?.filePaths[0])
         window.videoPlayer.src = result?.filePaths[0]
         window.videoPlayer.play()
 
@@ -51,10 +53,12 @@ function createPlaylist(list){
         let videoNeo = document.createElement('li')
         let delButton = document.createElement('button')
         delButton.className = "delete is-small"
-        delButton.onclick = (event) => {
-            console.log("remove !!!")
+
+        delButton.addEventListener('dblclick', function (event) {
+            console.log("db click")
             removeVideo(event.srcElement.parentNode)
-        }
+        });
+
         videoNeo.innerHTML = `<span class="hand">  </span>${filename}`
         videoNeo.setAttribute("path", source);
         videoNeo.setAttribute("index", playlist.getElementsByTagName('li').length);
@@ -70,8 +74,6 @@ function createPlaylist(list){
     })
 }
 
-
-
 function removeVideo(val) {
     var emptyFlag = document.getElementById('emptyFlag')
     var listElements = document.getElementById("playlist");
@@ -94,6 +96,8 @@ function removeVideo(val) {
     localStorage.setItem('playlist', currentPlaylist.join("|"));
 }
 
+
+
 // Init playlist
 document.addEventListener('DOMContentLoaded', ()=> {
     let lastPlaylist = localStorage.getItem('playlist').split("|")