Commit 7ba91cb8 authored by Marianne's avatar Marianne

code pas hyper propre mais bon

parent 089121bc
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
@font-face {
font-family: "not-courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal; }
html {
font-size: 20px; }
body header {
font-family: "not-courr";
padding: 1rem; }
body .track {
display: none; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -3rem 0.5rem 0 0.5rem;
display: flex;
width: 100%; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
margin: 0.5rem;
background-color: white; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: magenta;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .frames > div {
display: none; }
@import "reset";
@font-face{
font-family: "not-courr";
src:url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal;
}
html{
......@@ -8,13 +16,24 @@ html{
body{
font-size: 10rem;
header{
font-family: "not-courr";
padding: 1rem;
}
.track{
display: none;
}
}
main{
font-size: 10rem;
.controls{
position: absolute;
......@@ -64,6 +83,10 @@ main{
content: "▶";
}
.seconds{
padding: 0.25rem 0.25rem 0.1rem 0.25rem;
}
}
......@@ -75,16 +98,7 @@ main{
}
div.sing{
display: block;
background-color: yellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0;
}
}
}
\ No newline at end of file
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
html {
font-size: 20px; }
body .track {
display: none; }
main {
font-size: 10rem; }
main .controls {
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -3rem 0.5rem 0 0.5rem;
display: flex;
width: 100%; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
margin: 0.5rem;
background-color: white; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: magenta;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .frames > div {
display: none; }
main .frames div.sing {
display: block;
background-color: yellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0; }
@import 'frame';
main{
.frames{
div.sing{
display: block;
background-color: yellow;
min-width: 100%;
height: 100vh;
text-align: center;
padding: 4rem 0 4rem 0;
}
}
}
\ No newline at end of file
......@@ -69,38 +69,41 @@ select::-ms-expand {
html {
font-size: 20px; }
body {
font-size: 10rem; }
body .track {
display: none; }
main .controls {
position: absolute;
width: 2rem;
font-size: 1rem;
margin: -3rem 0.5rem 0 0.5rem;
display: flex;
width: 100%; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
margin: 0.5rem;
background-color: white; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: magenta;
height: 100%; }
main .controls .play,
main .controls .pause {
main {
font-size: 10rem; }
main .controls {
position: absolute;
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .frames > div {
display: none; }
font-size: 1rem;
margin: -3rem 0.5rem 0 0.5rem;
display: flex;
width: 100%; }
main .controls > div {
padding: 0.25rem 0 0.1rem 0;
margin: 0.5rem;
background-color: white; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: magenta;
height: 100%; }
main .controls .play,
main .controls .pause {
width: 2rem;
text-align: center; }
main .controls .play::before {
content: "❙❙"; }
main .controls .pause::before {
content: "▶"; }
main .controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
main .frames > div {
display: none; }
main .frames div.sing {
display: block;
......
......@@ -17,7 +17,6 @@ function getVidId(src){
}
/* ---- DOM ---- */
function setIds(){
......@@ -30,6 +29,8 @@ function setIds(){
tracksIds.push(id);
counts.push(0);
track.dataset.num=index;
});
}
......@@ -51,7 +52,7 @@ function counter(track, index){
if(!nowFrame.classList.contains("sing")){
var frames = document.querySelectorAll(".frames>div");
var frames = karaokes[index].querySelectorAll(".frames>div");
frames.forEach((frame) => {
......@@ -97,11 +98,13 @@ function setKaraoke(player, event, index){
}
}
function setCurrentFrame(index, seconds){
var frames = karaokes[index].querySelectorAll(".frames>div");
var frameTimes = [];
frames.forEach((frame) => {
var slideTime = parseFloat(frame.dataset.slide);
......@@ -109,6 +112,7 @@ function setCurrentFrame(index, seconds){
if(slideTime <= seconds){
frameTimes.push(slideTime);
}
if(frame.classList.contains("sing")){
......@@ -119,8 +123,6 @@ function setCurrentFrame(index, seconds){
});
var thatSlide = karaokes[index].querySelector("[data-slide='"+frameTimes[frameTimes.length-1]+"']");
thatSlide.classList.add("sing");
......@@ -146,6 +148,15 @@ function setProgressBar(player, currentTime, index){
progress.style.width=progLength+"px";
setTimer(index, currentTime);
}
function setTimer(index, time){
var counter = karaokes[index].querySelector(".seconds");
counter.innerHTML=time+" (s)";
}
function navigateInProgressBar(player, index){
......@@ -159,7 +170,6 @@ function navigateInProgressBar(player, index){
var length = bar.offsetWidth;
var progress = bar.querySelector(".progress");
var secs = Math.round(map_range(pos, 0, length, 0, totalTimes[index]));
player.seekTo(secs);
......@@ -171,35 +181,33 @@ function navigateInProgressBar(player, index){
}
setCurrentFrame(index, secs);
setCurrentFrame(index, secs);
setTimer(index, secs);
});
}
function setPlayPauseButton(event){
let playButts = document.querySelectorAll("[data-action='playpause']");
playButts.forEach((playButt) => {
playButt.addEventListener("click", () => {
function setPlayPauseButton(player, index){
if(playButt.classList.contains("pause")){
console.log(index);
var playButt = karaokes[index].querySelector("[data-action='playpause']");
event.target.playVideo();
playButt.classList.remove("pause");
playButt.classList.add("play");
playButt.addEventListener("click", () => {
}else{
if(playButt.classList.contains("pause")){
event.target.pauseVideo();
playButt.classList.remove("play");
playButt.classList.add("pause");
player.playVideo();
playButt.classList.remove("pause");
playButt.classList.add("play");
}
});
}else{
player.pauseVideo();
playButt.classList.remove("play");
playButt.classList.add("pause");
}
});
}
......@@ -228,23 +236,21 @@ function onYouTubeIframeAPIReady(){
function onPlayerReady(event) {
setPlayPauseButton(event);
var index = parseInt(event.target.getIframe().dataset.num);
players.forEach((player, index) => {
fillTotalTimes(event.target);
setPlayPauseButton(event.target, index);
navigateInProgressBar(event.target, index);
fillTotalTimes(player);
navigateInProgressBar(player, index);
});
}
function onPlayerStateChange(event){
players.forEach((player, index) => {
var index = parseInt(event.target.getIframe().dataset.num);
setKaraoke(player, event, index);
setKaraoke(event.target, event, index);
});
}
......@@ -254,7 +260,6 @@ function onPlayerStateChange(event){
var tracks = document.querySelectorAll(".track");
var karaokes = document.querySelectorAll(".karaoke")
var tracksIds = [];
var tracksTimes = [];
var progressBars = document.querySelectorAll(".bar");
var players = [];
var counts = [];
......
......@@ -2,11 +2,35 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" href="assets/css/frame.css">
<link rel="stylesheet" type="text/css" href="assets/css/karaoke.css">
<title>KaraoPrint</title>
</head>
<body>
<header>
<h1>Karaoprint</h1>
</header>
<main>
<section id="salut" class="karaoke">
<div class="frames">
<div data-slide="0" class="sing">
HEY DUDE
</div>
<div data-slide="10">
YEAH
</div>
</div>
<div class="controls">
<div class="pause" data-action="playpause"></div>
<div class="bar">
<div class="progress"></div>
</div>
<div class="seconds">
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=H9tEvfIsDyo"></div>
</section>
<section id="marianne" class="karaoke">
<div class="frames">
<div data-slide="0" class="sing">
......@@ -37,11 +61,12 @@
<div class="progress"></div>
</div>
<div class="seconds">
0 (s)
</div>
</div>
<div class="track" data-src="https://www.youtube.com/watch?v=7RI3-JkaWnk"></div>
</section>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="assets/js/karaoPrint.js"></script>
</main>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment