début refonte v2

assets/css/dede-player.css

@@ -0,0 +1,106 @@
+:root{
+  --one-dpi: 72px;
+  --dd-blue: rgb(0,42,255);
+}
+
+.dd-player{
+  width: 25vw;
+  height: 100vh;
+  position:fixed;
+  top: 0px;
+  background-color: white;
+  right:0px;
+  color: black;
+  padding-top:  var(--one-dpi);
+  padding-bottom:  var(--one-dpi);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.collapsed{
+  display: none;
+}
+
+.dd-player-switch{
+  position :fixed;
+  bottom: 0;
+  right: 0;
+  width: var(--one-dpi);
+  height:var(--one-dpi);
+  background-color: white;
+  cursor: pointer;
+}
+
+.dd-player-switch.opened{
+  background-color: var(--dd-blue);
+}
+
+.dd-player h3 {
+  font-size: 1rem;
+  /*margin-top: calc(2 * var(--one-dpi));*/
+  margin: calc(var(--one-dpi) / 2);
+  /* margin-bottom : var(--one-dpi); */
+}
+
+.dd-player ul {
+  margin-left : calc(var(--one-dpi) / 2);
+  color: var(--dd-blue);
+  font-size: 1.5rem;
+}
+
+.dd-player ul li img{
+  width:24px;
+  height:24px;
+  margin-right: 12px;
+}
+
+.playing{
+  font-weight: bold;
+  color : black;
+}
+
+.progress-wrap{
+  display:flex;
+  width: 100%;
+  justify-content: space-around;
+
+}
+.progress-wrap .time-info{
+  font-size:0.66rem;
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+}
+
+progress{
+  display: inline;
+  /* margin: 0 calc(var(--one-dpi) / 2); */
+  /* max-width: calc(100% - var(--one-dpi)); */
+  height: 10px;
+  width:66%;
+
+}
+
+
+
+#play-button{
+  max-width: calc(var(--one-dpi) / 2);
+  max-height: calc(var(--one-dpi) / 2);
+  margin: calc(var(--one-dpi) / 2);
+}
+
+progress::-moz-progress-bar{
+  background-color: black;
+}
+progress{
+  background-color: #rgba(200,200,200,0.5);
+}
+
+.dd-player ul li, #play-button{
+  cursor : pointer;
+}
+
+#wrap-playlist{
+  flex: 1;
+}

assets/css/labelize.css

@@ -0,0 +1,62 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+section{
+    height: 100vh;
+}
+
+section:nth-of-type(odd){
+    background-color: white;
+    color: blue;
+}
+
+section:nth-of-type(even){
+    background-color: blue;
+    color: white;
+}
+
+.cover{
+    background : url(../images/cover.png) no-repeat center center;
+}
+
+.one-dpi{
+    position : fixed;
+    bottom: 0;
+    right: 0;
+    width : 72px;
+    height: 72px;
+    background-color: black;
+    z-index: 10;
+    cursor: pointer;
+}
+
+.one-dpi.clicked {
+    background : white;
+}
+
+.player {
+    position : fixed;
+    right : 0;
+    top : 0;
+    height : 100vh;
+    width : 25vw;
+    color : black;
+    z-index: 5;
+    background-color: black;
+    color: white;
+    padding: 25px;
+}
+.player ul {
+    list-style-type: none;
+}
+.player li {
+    height: 10vh;
+    display : flex;
+    align-items: center;
+}
+
+.hidden{
+    display: none;
+}

assets/labelize.js → assets/js/labelize.js

@@ -2,20 +2,20 @@ var current = undefined
 const progressMargin = 50;
 var progress = undefined;
 window.addEventListener('DOMContentLoaded', (event) => {
-    progress = document.getElementById('player-progress');
-    document.getElementById('player-progress').addEventListener('click', (e) => {
-      if(current){
-        let media = current.getElementsByTagName('audio')[0];
-        media.currentTime = e.layerX * media.duration / progress.offsetWidth;
-
-      }
-    });
-
-    let toggler = document.getElementById('player-toggler');
-    toggler.setAttribute('title','afficher/masquer la liste des morceaux');
-    toggler.addEventListener('click', (e) => {
-      document.getElementsByTagName('ul')[0].classList.toggle('invisible');
-    })
+//    progress = document.getElementById('player-progress');
+//    document.getElementById('player-progress').addEventListener('click', (e) => {
+//      if(current){
+//        let media = current.getElementsByTagName('audio')[0];
+//        media.currentTime = e.layerX * media.duration / progress.offsetWidth;
+//
+//      }
+//    });
+//
+//    let toggler = document.getElementById('player-toggler');
+//    toggler.setAttribute('title','afficher/masquer la liste des morceaux');
+//    toggler.addEventListener('click', (e) => {
+//      document.getElementsByTagName('ul')[0].classList.toggle('invisible');
+//    })
 });
 
 
@@ -58,3 +58,8 @@ function prettyDuration(duration) {
     sec = sec >= 10 ? sec : '0' + sec;
     return min + ':' + sec;
 }
+
+function togglePlayer(playerId, dpiId){
+    document.getElementById(playerId).classList.toggle('hidden');
+     document.getElementById(dpiId).classList.toggle('clicked');
+}

assets/labelize.css

@@ -1,124 +0,0 @@
-@font-face {
- font-family: "NotoSans";
- src: url(./fonts/noto-sans/NotoSans-Regular.ttf);
-}
-
-:root {
-  --main-bg-color: rgba(255,255,255,0.7);
-}
-
-*{
-  margin:  0;
-  padding: 0;
-  box-sizing: border-box;
-}
-html{
-  font-family: NotoSans;
-  color: black;
-}
-html, body{
-    width: 100vw;
-    height: 100vh;
-    background-color: black;
-}
-
-body{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.track-list{
-  width: 100vh;
-  height: 100vh;
-  background-image: url(../cover.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-ul.invisible{
-  display: none;
-}
-
-ul{
-  position: fixed;
-  right:0px;
-  top:0px;
-  padding-top: 30px;
-  list-style-type: none;
-  background-color: var(--main-bg-color);
-  height: 100vh;
-  font-size: 0.75rem;
-}
-
-div#player-toggler{
-  position: fixed;
-  top: 0px;
-  right:0px;
-  margin-top:2px;
-  margin-right: 2px;
-  z-index: 10;
-  cursor: pointer;
-}
-
-li{
-    /*background-color: var(--main-bg-color);*/
-    padding: 2px;
-}
-li{
-  margin-top:2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-button{
-  background-color: rgba(0,0,0,0);
-  border: none;
-  margin-left: 5px;
-  cursor: pointer;
-}
-
-div#player-toggler > img{
-  width: 24px;
-  height: 24px;
-}
-button img{
-  width: 16px;
-  height: 16px;
-}
-
-progress::-moz-progress-bar {
-  background-color: black !important;
-}
-#player-progress{
-  position: fixed;
-  left:0;
-  top:0;
-  height: 1vw;
-  width: 100vh;
-  background-color: var(--main-bg-color);
-  border: none;
-  border-top:2px solid var(--main-bg-color);
-  border-bottom:2px solid var(--main-bg-color);
-  cursor: pointer;
-  transform: rotate(90deg);
-  transform-origin: top left;
-  margin-left: 1vw;
-  /* margin-top:calc(50vh - 0.5vw);
-  margin-left:0; */
-}
-
-#time-info{
-  visibility: hidden;
-  position: fixed;
-  bottom: 2px;
-  left: 1%;
-  padding-left: 2px;
-  color:white;
-  font-size: 0.6rem;
-}

labelize.py

@@ -1,67 +1,70 @@
-
 import eyed3
 import os
 import sys
 import shutil
 from html_writer import Html
 
-#TracksDir class definition
+
+# TracksDir class definition
 class TracksDir:
-    def __init__(self, trackFiles):
-        self.trackFiles = trackFiles
+    def __init__(self, track_files):
+        self.trackFiles = track_files
 
-    #HTML Output
-    def toHTML(self):
+    # HTML Output
+    def to_html(self):
         head = Html()
         head.self_close_tag('meta', attributes=dict(charset='utf-8'))
-        head.self_close_tag('link', attributes=dict(href='assets/labelize.css',rel='stylesheet'))
+        head.self_close_tag('link', attributes=dict(href='assets/labelize.css', rel='stylesheet'))
         body = Html()
-        trackNumber = 0
-        with body.tag('div',classes=['track-list']):
-            #body.tag_with_content('Track List', name='h2')
-            with body.tag('div',attributes=dict(id='player-toggler')):
+        track_number = 0
+        with body.tag('div', classes=['track-list']):
+            # body.tag_with_content('Track List', name='h2')
+            with body.tag('div', attributes=dict(id='player-toggler')):
                 body.self_close_tag('img', attributes=dict(src='assets/labelize.png'))
             with body.tag('ul') as list:
                 for t in self.trackFiles:
-                    trackNumber =  trackNumber + 1
-                    trackId = 'track-' + str(trackNumber)
-                    audiofile = eyed3.load("build/" + t)
+                    track_number = track_number + 1
+                    track_id = 'track-' + str(track_number)
+                    audio_file = eyed3.load("build/" + t)
                     with body.tag('li') as li:
-                        print(audiofile.tag.title)
-                        li += str(audiofile.tag.title or 'untitled')+ ' - '
-                        li += str(audiofile.tag.album or 'untitled')+ ' - '
-                        li += audiofile.tag.artist
-                        with body.tag('button',attributes=dict(onclick="togglePlay(this)")):
+                        print(audio_file.tag.title)
+                        li += str(audio_file.tag.title or 'untitled') + ' - '
+                        li += str(audio_file.tag.album or 'untitled') + ' - '
+                        li += audio_file.tag.artist
+                        with body.tag('button', attributes=dict(onclick="togglePlay(this)")):
                             body.self_close_tag('img', attributes=dict(src='assets/play.png'))
-                            with body.tag('audio', attributes=dict(src=t, id=trackId,
-                            ontimeupdate="updateProgress(this)")) as audio:
-                                audio+="Your browser does not support the audio element"
+                            with body.tag('audio', attributes=dict(src=t, id=track_id,
+                                                                   ontimeupdate="updateProgress(this)")) as audio:
+                                audio += "Your browser does not support the audio element"
 
         # with body.tag('canvas',attributes=dict(id='player-progress')) as canvas:
         #     canvas += "player's progress bar"
-        with body.tag('progress',attributes=dict(id='player-progress',value='0')) as canvas:
-             canvas += "player's progress bar"
-        with body.tag('div',attributes=dict(id='time-info')) as timeInfo:
+        with body.tag('progress', attributes=dict(id='player-progress', value='0')) as canvas:
+            canvas += "player's progress bar"
+        with body.tag('div', attributes=dict(id='time-info')) as timeInfo:
             timeInfo += '00:00'
         with body.tag('script', attributes=dict(src='assets/labelize.js')) as script:
-            script+=""#script tag is not added without that trick
+            script += ""  # script tag is not added without that trick
 
         return Html.html_template(head, body).to_raw_html(indent_size=2)
 
+
 # script usage function
 def usage():
     print('USAGE : labelize.py [inputDirectory] [outputDirectory]')
 
+
 # script beginning
 arguments = len(sys.argv) - 1
-if(arguments != 2):
+if arguments != 2:
     usage()
     sys.exit(2)
 
-inputDirectory = sys.argv[1]
-outputDirectory = sys.argv[2]
+input_directory = sys.argv[1]
+output_directory = sys.argv[2]
+
 
-def copyDirectory(src, dest):
+def copy_directory(src, dest):
     try:
         shutil.copytree(src, dest)
     except shutil.Error as e:
@@ -69,23 +72,24 @@ def copyDirectory(src, dest):
     except OSError as e:
         print('Directory not copied. Error: %s' % e)
 
-#removes existing build directory if exists
-if os.path.isdir(outputDirectory):
-    shutil.rmtree(outputDirectory)
 
-#copies source files in the build directory
-copyDirectory(inputDirectory, 'build')
+# removes existing build directory if exists
+if os.path.isdir(output_directory):
+    shutil.rmtree(output_directory)
+
+# copies source files in the build directory
+copy_directory(input_directory, 'build')
 
-#copies assets in the build directory
-copyDirectory('assets', outputDirectory + '/assets')
+# copies assets in the build directory
+copy_directory('assets', output_directory + '/assets')
 
-for root, dirs, files in os.walk(inputDirectory):
+for root, dirs, files in os.walk(input_directory):
     trackFiles = []
     for f in files:
         if f.lower().endswith(('.mp3', '.wav', '.ogg')):
             trackFiles.append(f)
 
     td = TracksDir(trackFiles)
-    f = open(outputDirectory + "/index.html","w+")
-    f.write(td.toHTML())
+    f = open(output_directory + "/index.html", "w+")
+    f.write(td.to_html())
     f.close()

labelize.yaml

@@ -0,0 +1,2 @@
+title: Clou
+cover: image.png

requirements.txt

@@ -1,4 +1,8 @@
-eyeD3==0.8.10
+eyeD3==0.8.12
 html-writer==1.1.1
+Mako==1.1.2
+MarkupSafe==1.1.1
+pkg-resources==0.0.0
 python-magic==0.4.15
+PyYAML==5.3.1
 six==1.12.0

template.html

@@ -0,0 +1,51 @@
+## -*- coding: utf-8 -*-
+<!DOCTYPE html>
+
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+
+  <title>${title}</title>
+  <meta name="description" content="dedemo">
+  <meta name="author" content="dede.space">
+  <link rel="stylesheet" href="assets/css/dede-player.css">
+  <link rel="stylesheet" href="assets/css/labelize.css">
+</head>
+
+  <body>
+    <section class="cover">
+
+      <!-- <img src="images/CLOU_Icono-1.png"/> -->
+    </section>
+    <section class="dates">
+        <h2><span class="scaps">${title}</span> live</h2>
+    </section>
+    <section class="albums">
+
+    </section>
+
+
+
+    <section class="contact">
+        <span>contact<span class="point">@</span>clou<span class="point">.</span>space</span>
+        <footer class="flex-center">
+            dede <span class='point'>.</span>space<span class='pipe'>|</span>2019
+        </footer>
+    </section>
+
+    <div class="one-dpi" id="one-dpi" onclick="togglePlayer('player','one-dpi');"></div>
+
+    <div class="player hidden" id="player">
+        <h2>${title} - Audio</h2>
+        <ul>
+        % for a in tracks:
+            <li>Item ${loop.index}: ${a}</li>
+        % endfor
+        </ul>
+    </div>
+
+    <script src="./assets/js/labelize.js"></script>
+  </body>
+</html>
+
+<!---nav footered-screen-->