icedream
/
dash-wooden-clock
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve styling.
gitea/icedream/dash-wooden-clock/master There was a failure building this commit Details

master
Icedream 2018-08-25 06:01:38 +02:00
parent 8dd726c973
commit 862bc0594a
Signed by: icedream
GPG Key ID: 1573F6D8EFE4D0CF
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/index.js
View File

@ -17,6 +17,7 @@ window.addEventListener('load', () => {
const playContainer = document.createElement('div'); const playContainer = document.createElement('div');
playContainer.classList.add(style.play); playContainer.classList.add(style.play);
const playButton = document.createElement('button'); const playButton = document.createElement('button');
playButton.classList.add(style.playInner);
playButton.classList.add('icon'); playButton.classList.add('icon');
playButton.classList.add('icon-play'); // fontello icon playButton.classList.add('icon-play'); // fontello icon
playContainer.appendChild(playButton); playContainer.appendChild(playButton);
@ -27,6 +28,11 @@ window.addEventListener('load', () => {
statusContent.classList.add(style.statusInner); statusContent.classList.add(style.statusInner);
statusContainer.appendChild(statusContent); statusContainer.appendChild(statusContent);
const playerContainer = document.createElement('video');
playerContainer.classList.add(style.video);
playerContainer.loop = true;
playerContainer.controls = false;
function showStatus() { function showStatus() {
if (!(style['status--visible'] in statusContainer.classList)) { if (!(style['status--visible'] in statusContainer.classList)) {
statusContainer.classList.add(style['status--visible']); statusContainer.classList.add(style['status--visible']);
@ -51,12 +57,13 @@ window.addEventListener('load', () => {
playContainer.classList.remove(style['play--visible']); playContainer.classList.remove(style['play--visible']);
} }
showStatus('Constructing your clock...'); function showPlayer() {
if (!(style['video--visible'] in playerContainer.classList)) {
playerContainer.classList.add(style['video--visible']);
}
}
const playerContainer = document.createElement('video'); showStatus('Constructing your clock...');
playerContainer.classList.add(style.video);
playerContainer.loop = true;
playerContainer.controls = false;
const parsedHash = queryString.parse(window.location.query || window.location.hash); const parsedHash = queryString.parse(window.location.query || window.location.hash);
let secondsOfDay; let secondsOfDay;
@ -114,6 +121,7 @@ window.addEventListener('load', () => {
player.on('playbackPlaying', () => { player.on('playbackPlaying', () => {
hideStatus(); hideStatus();
hidePlayButton(); hidePlayButton();
showPlayer();
// resync video position with current time if necessary // resync video position with current time if necessary
if (parsedHash.s === undefined && Math.abs(player.time() - getSecondsOfDay()) > 1) { if (parsedHash.s === undefined && Math.abs(player.time() - getSecondsOfDay()) > 1) {

16
src/player.styl
View File

@ -32,7 +32,7 @@ body
z-index: 10 z-index: 10
display: none display: none
&.status__inner >.status__inner
background: rgba(0, 0, 0, .5) background: rgba(0, 0, 0, .5)
&.status--visible &.status--visible
@ -41,7 +41,10 @@ body
.video .video
fullscreen() fullscreen()
animation: fadein .25s linear opacity: 0
transition: opacity .25s linear
&.video--visible
opacity: 1
.play .play
fullscreen() fullscreen()
@ -52,10 +55,15 @@ body
opacity: 0 opacity: 0
display: none display: none
z-index: 10 z-index: 10
font-size: 5em
&.play__inner >.play__inner
background: rgba(0, 0, 0, .5) background: rgba(0, 0, 0, .5)
border: #fff 1px solid
border-radius: 4px
color: #fff
font-size: 5em
width: 2.5em
height: 2.5em
&.play--visible &.play--visible
opacity: 1 opacity: 1