diff --git a/assets/css/dede-player.css b/assets/css/dede-player.css new file mode 100644 index 0000000..c005a08 --- /dev/null +++ b/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; +} diff --git a/assets/css/labelize.css b/assets/css/labelize.css new file mode 100644 index 0000000..6fbc02c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/labelize.png b/assets/images/labelize.png similarity index 100% rename from assets/labelize.png rename to assets/images/labelize.png diff --git a/assets/pause.png b/assets/images/pause.png similarity index 100% rename from assets/pause.png rename to assets/images/pause.png diff --git a/assets/play.png b/assets/images/play.png similarity index 100% rename from assets/play.png rename to assets/images/play.png diff --git a/assets/labelize.js b/assets/js/labelize.js similarity index 63% rename from assets/labelize.js rename to assets/js/labelize.js index c10eabe..16dcd7e 100644 --- a/assets/labelize.js +++ b/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'); +} diff --git a/assets/labelize.css b/assets/labelize.css deleted file mode 100644 index 737a6fb..0000000 --- a/assets/labelize.css +++ /dev/null @@ -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; -} diff --git a/labelize.py b/labelize.py index 4138525..7a9f71b 100644 --- a/labelize.py +++ b/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() diff --git a/labelize.yaml b/labelize.yaml new file mode 100644 index 0000000..84db52d --- /dev/null +++ b/labelize.yaml @@ -0,0 +1,2 @@ +title: Clou +cover: image.png \ No newline at end of file diff --git a/requirements.txt b/requirements.txt index 54239dd..d71c24e 100644 --- a/requirements.txt +++ b/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 diff --git a/template.html b/template.html new file mode 100644 index 0000000..cb6cea6 --- /dev/null +++ b/template.html @@ -0,0 +1,51 @@ +## -*- coding: utf-8 -*- + + + + + + + ${title} + + + + + + + +
+ + +
+
+

${title} live

+
+
+ +
+ + + +
+ contact@clou.space + +
+ +
+ + + + + + + +