Selaa lähdekoodia

début refonte v2

v2
choj 4 vuotta sitten
vanhempi
commit
c4d7522dc7
11 muutettua tiedostoa jossa 289 lisäystä ja 179 poistoa
  1. +106
    -0
      assets/css/dede-player.css
  2. +62
    -0
      assets/css/labelize.css
  3. +0
    -0
      assets/images/labelize.png
  4. +0
    -0
      assets/images/pause.png
  5. +0
    -0
      assets/images/play.png
  6. +19
    -14
      assets/js/labelize.js
  7. +0
    -124
      assets/labelize.css
  8. +44
    -40
      labelize.py
  9. +2
    -0
      labelize.yaml
  10. +5
    -1
      requirements.txt
  11. +51
    -0
      template.html

+ 106
- 0
assets/css/dede-player.css Näytä tiedosto

@@ -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;
}

+ 62
- 0
assets/css/labelize.css Näytä tiedosto

@@ -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.png → assets/images/labelize.png Näytä tiedosto


assets/pause.png → assets/images/pause.png Näytä tiedosto


assets/play.png → assets/images/play.png Näytä tiedosto


assets/labelize.js → assets/js/labelize.js Näytä tiedosto

@@ -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');
}

+ 0
- 124
assets/labelize.css Näytä tiedosto

@@ -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;
}

+ 44
- 40
labelize.py Näytä tiedosto

@@ -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()

+ 2
- 0
labelize.yaml Näytä tiedosto

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

+ 5
- 1
requirements.txt Näytä tiedosto

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

+ 51
- 0
template.html Näytä tiedosto

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

Ladataan…
Peruuta
Tallenna