Commit 78b09468 authored by Marianne's avatar Marianne

okkkk

parent 793b3a38
......@@ -97,6 +97,11 @@ body {
font-family: "courr";
color: magenta; }
.through {
text-decoration: line-through;
line-height: 0.5rem;
display: inline-block; }
strong {
font-family: "archivo"; }
......
......@@ -47,6 +47,12 @@ body{
color: magenta;
}
.through{
text-decoration: line-through;
}
strong{
font-family: "archivo";
......
No preview for this file type
/* FONTS */
@font-face {
font-family: "alphabet";
src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal; }
/* ANIMS */
@keyframes appear {
from {
height: 0; }
to {
height: 80vh; } }
@keyframes rotateAppear {
from {
transform: rotate(-360deg);
opacity: 0;
height: 0; }
to {
transform: rotate(0);
opacity: 1;
height: 80vh; } }
@keyframes hiItsMe {
from {
margin: 0 0 0 -200%; }
to {
margin: 0 -200% 0 0; } }
/* STYLE */
main {
font-family: "alphabet"; }
main .slides {
font-size: 8rem; }
main .slides div.sing {
background: linear-gradient(#f1f441, #f44141);
text-align: center; }
main .slides div.sing .blue {
color: blue;
display: inline; }
main .slides [data-slide='18.6'] img {
animation-duration: 1s;
animation-name: appear;
animation-iteration-count: 4; }
main .slides [data-slide='22.6'] img {
animation-duration: 2s;
animation-name: rotateAppear;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='26.6'] img {
animation-duration: 2s;
animation-name: hiItsMe;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='30.4'] .text {
position: absolute; }
main .slides [data-slide='30.4'] img {
height: 80vh; }
main .slides [data-slide='30.4'] .text {
width: 100%;
color: blue;
z-index: 9;
text-align: center; }
@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: "archivo";
src: url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal; }
@font-face {
font-family: "not-courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal; }
html {
font-size: 20px; }
body {
width: 100%; }
body > header {
font-family: "archivo";
padding: 1rem;
position: fixed;
bottom: 0;
right: 0.5rem; }
body > header h1 > span {
color: blue; }
body .track {
display: none; }
main .controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
main .controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
main .controls .bar {
width: 20rem;
padding: 0; }
main .controls .bar .progress {
width: 0;
background-color: blue;
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 .slides > div {
display: none; }
main .slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
/* ---- MATH ---- */
function map_range(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
/* ---- STRINGS ---- */
function getVidId(src){
var last = src.lastIndexOf("v=")+2;
var vidId = src.substr(last);
return vidId;
}
/* ---- DOM ---- */
function setIds(){
tracks.forEach((track, index) => {
var id = "track-"+index;
track.id=id;
tracksIds.push(id);
counts.push(0);
track.dataset.num=index;
});
}
/* ---- KARAOKE ---- */
function counter(track, index){
var frameRate = 10;
var inter = (track, index) => {
var time = Math.trunc(track.getCurrentTime()*10)/10;
var nowFrame = karaokes[index].querySelector("[data-slide='"+time+"']");
setProgressBar(track, time, index);
if(nowFrame){
if(!nowFrame.classList.contains("sing")){
var slides = karaokes[index].querySelectorAll(".slides>div");
slides.forEach((slide) => {
if(slide.classList.contains("sing")){
slide.classList.remove("sing");
}
});
nowFrame.classList.add("sing");
}
}
}
return setInterval(inter, frameRate, track, index);
}
function setKaraoke(player, event, index){
var state = event.data;
if(state == 1){
counts[index] = counter(player, index);
}
if(state == 2){
clearInterval(counts[index]);
}
if(state == 0){
clearInterval(counts[index]);
count = 0;
}
}
function setCurrentFrame(index, seconds){
var slides = karaokes[index].querySelectorAll(".slides>div");
var slideTimes = [];
slides.forEach((slide) => {
var slideTime = parseFloat(slide.dataset.slide);
if(slideTime <= seconds){
slideTimes.push(slideTime);
}
if(slide.classList.contains("sing")){
slide.classList.remove("sing");
}
});
var thatSlide = karaokes[index].querySelector("[data-slide='"+slideTimes[slideTimes.length-1]+"']");
thatSlide.classList.add("sing");
}
function fillTotalTimes(player){
totalTimes.push(player.getDuration());
}
/* CONTROLS PLAYER */
function setProgressBar(player, currentTime, index){
var bar = progressBars[index];
var totalTime = totalTimes[index];
var progress = bar.querySelector(".progress");
var length = bar.offsetWidth;
var progLength = Math.round(map_range(currentTime, 0, totalTime, 0, length));
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){
let bar = progressBars[index];
bar.addEventListener("click", (e) => {
var rect = e.target.getBoundingClientRect();
var pos = e.clientX - rect.left;
var length = bar.offsetWidth;
var progress = bar.querySelector(".progress");
var secs = Math.round(map_range(pos, 0, length, 0, totalTimes[index]));
player.seekTo(secs);
progress.style.width=pos+"px";
if(player.getPlayerState() == 1){
player.playVideo();
}
setCurrentFrame(index, secs);
setTimer(index, secs);
});
}
function setPlayPauseButton(player, index){
var playButt = karaokes[index].querySelector("[data-action='playpause']");
playButt.addEventListener("click", () => {
if(playButt.classList.contains("pause")){
player.playVideo();
playButt.classList.remove("pause");
playButt.classList.add("play");
}else{
player.pauseVideo();
playButt.classList.remove("play");
playButt.classList.add("pause");
}
});
}
/* ---- YOUTUBE EMBED ---- */
function onYouTubeIframeAPIReady(){
tracks.forEach((track, index) => {
players[index] = new YT.Player(track.id, {
videoId: getVidId(track.dataset.src),
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:80' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
}
function onPlayerReady(event) {
var index = parseInt(event.target.getIframe().dataset.num);
fillTotalTimes(event.target);
setPlayPauseButton(event.target, index);
navigateInProgressBar(event.target, index);
}
function onPlayerStateChange(event){
var index = parseInt(event.target.getIframe().dataset.num);
setKaraoke(event.target, event, index);
}
/* ---- LOAD ---- */
var tracks = document.querySelectorAll(".track");
var karaokes = document.querySelectorAll(".karaoke")
var tracksIds = [];
var progressBars = document.querySelectorAll(".bar");
var players = [];
var counts = [];
var totalTimes = [];
document.addEventListener("DOMContentLoaded", () => {
setIds();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/karaoprint.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<title>☆☆ karaoPrint / Demo ☆☆</title>
</head>
<body class="demo">
<header>
<h1><span>karaoPr</span>int.js
</div></h1>
</header>
<main>
<section id="marianne" class="karaoke">
<div class="slides">
<div data-slide="0" class="sing">
Welcome to
<div>Karaoprint.js</div>
</div>
<div data-slide="1">
Welcome to
<div>
<span class="blue">K</span>araoprint.js
</div>
</div>
<div data-slide="1.2">
Welcome to
<div>
<span class="blue">Ka</span>raoprint.js
</div>
</div>
<div data-slide="1.4">
Welcome to
<div>
<span class="blue">Kar</span>aoprint.js
</div>
</div>
<div data-slide="1.6">
Welcome to
<div>
<span class="blue">Kara</span>oprint.js
</div>
</div>
<div data-slide="1.8">
Welcome to
<div>
<span class="blue">Karao</span>print.js
</div>
</div>
<div data-slide="2">
Welcome to
<div>
<span class="blue">Karaop</span>rint.js
</div>
</div>
<div data-slide="2.2">
Welcome to
<div>
<span class="blue">Karaopr</span>int.js
</div>
</div>
<div data-slide="2.4" >
Welcome to
<div>
<span class="blue">Karaopri</span>nt.js
</div>
</div>
<div data-slide="2.6" >
Welcome to
<div>
<span class="blue">Karaoprin</span>t.js
</div>
</div>
<div data-slide="2.8">
Welcome to
<div>
<span class="blue">Karaoprint</span>.js
</div>
</div>
<div data-slide="3" >
Welcome to
<div>
<span class="blue">Karaoprint.</span>js
</div>
</div>
<div data-slide="3.2">
Welcome to
<div>
<span class="blue">Karaoprint.j</span>s
</div>
</div>
<div data-slide="3.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
</div>
<div data-slide="3.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
</div>
</div>
<div data-slide="3.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺
</div>
</div>
<div data-slide="4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="4.2">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.4">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>
<div data-slide="4.6">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div class="blue">
☺☺☺
</div>
</div>
<div data-slide="4.8">
Welcome to
<div>
<span class="blue">Karaoprint.js</span>
</div>
<div>
☺☺☺
</div>
</div>