From 5f218e8f8186e388d853a73d6135ec15b1812b2a Mon Sep 17 00:00:00 2001 From: PeterTheOne Date: Tue, 27 Feb 2018 22:24:56 +0100 Subject: add audio, useragent check, direct links, interface stuff --- contrib/site/images/controls.png | Bin 0 -> 5199 bytes contrib/site/images/muted.png | Bin 516 -> 0 bytes contrib/site/images/pause.png | Bin 455 -> 0 bytes contrib/site/images/play-big.png | Bin 2153 -> 0 bytes contrib/site/images/play.png | Bin 478 -> 0 bytes contrib/site/images/unmuted.png | Bin 564 -> 0 bytes contrib/site/images/volumeknob.png | Bin 264 -> 0 bytes contrib/site/index.html | 157 ++++++++++++++-------------- contrib/site/js/player.js | 113 ++++++++++++++++++++ contrib/site/style.css | 207 ++++++++++++++++++++++++++++++++++--- 10 files changed, 387 insertions(+), 90 deletions(-) create mode 100644 contrib/site/images/controls.png delete mode 100644 contrib/site/images/muted.png delete mode 100644 contrib/site/images/pause.png delete mode 100644 contrib/site/images/play-big.png delete mode 100644 contrib/site/images/play.png delete mode 100644 contrib/site/images/unmuted.png delete mode 100644 contrib/site/images/volumeknob.png create mode 100644 contrib/site/js/player.js (limited to 'contrib') diff --git a/contrib/site/images/controls.png b/contrib/site/images/controls.png new file mode 100644 index 0000000..e325549 Binary files /dev/null and b/contrib/site/images/controls.png differ diff --git a/contrib/site/images/muted.png b/contrib/site/images/muted.png deleted file mode 100644 index 7142e21..0000000 Binary files a/contrib/site/images/muted.png and /dev/null differ diff --git a/contrib/site/images/pause.png b/contrib/site/images/pause.png deleted file mode 100644 index 8153f50..0000000 Binary files a/contrib/site/images/pause.png and /dev/null differ diff --git a/contrib/site/images/play-big.png b/contrib/site/images/play-big.png deleted file mode 100644 index e6a9187..0000000 Binary files a/contrib/site/images/play-big.png and /dev/null differ diff --git a/contrib/site/images/play.png b/contrib/site/images/play.png deleted file mode 100644 index e6d1798..0000000 Binary files a/contrib/site/images/play.png and /dev/null differ diff --git a/contrib/site/images/unmuted.png b/contrib/site/images/unmuted.png deleted file mode 100644 index 28aa047..0000000 Binary files a/contrib/site/images/unmuted.png and /dev/null differ diff --git a/contrib/site/images/volumeknob.png b/contrib/site/images/volumeknob.png deleted file mode 100644 index d470d86..0000000 Binary files a/contrib/site/images/volumeknob.png and /dev/null differ diff --git a/contrib/site/index.html b/contrib/site/index.html index ca4cbc6..c03d1fa 100644 --- a/contrib/site/index.html +++ b/contrib/site/index.html @@ -29,8 +29,6 @@ - -
@@ -39,21 +37,23 @@ + +
- -
-
- +
- - + +
@@ -66,7 +66,8 @@

Direct Link(s):

 + +
@@ -85,8 +86,9 @@ + - + diff --git a/contrib/site/js/player.js b/contrib/site/js/player.js new file mode 100644 index 0000000..619bf08 --- /dev/null +++ b/contrib/site/js/player.js @@ -0,0 +1,113 @@ +'use strict'; + +function Player() { + this.init = function(video) { + if (video) { + this.$media = $('#video'); + } else { + this.$media = $('#audio'); + } + this.media = this.$media.get()[0]; + }; + + this.play = function() { + $('#video-overlay').hide(); + $('#player-state').css('background-position', '-25px -125px'); + this.media.load(); + this.media.play(); + }; + + this.stop = function() { + $('#video-overlay').show(); + $('#player-state').css('background-position', '0px -125px'); + this.media.pause(); + }; + + this.playstop = function() { + if(this.media.paused == true) { + this.play(); + } else { + this.stop(); + } + }; + + this.repaintVolumeControls = function() { + if(this.media.muted) { + $('#player-mute').css('background-position', '0px -150px'); + return; + } + + if(this.media.volume <= 0) { + $('#player-mute').css('background-position', '-25px -150px'); + return; + } + + if(this.media.volume < 0.5) { + $('#player-mute').css('background-position', '-50px -150px'); + return; + } + + $('#player-mute').css('background-position', '-75px -150px'); + }; + + this.updatevolume = function() { + this.media.volume = $('#player-volume').val() / 100; + this.repaintVolumeControls(); + }; + + this.togglemute = function() { + this.media.muted = !this.audio.muted; + $('#player-volume').prop('disabled', this.media.muted); + this.repaintVolumeControls(); + }; + + this.fullscreen = function() { + if (this.media.requestFullscreen) { + this.media.requestFullscreen(); + } else if (this.media.msRequestFullscreen) { + this.media.msRequestFullscreen(); + } else if (this.media.mozRequestFullScreen) { + this.media.mozRequestFullScreen(); + } else if (this.media.webkitRequestFullscreen) { + this.media.webkitRequestFullscreen(); + } + }; +} + +var player = new Player(); + +function player_init(video) { + player.init(video); + $('#player-playstop').on('click', player_playstop); + $('#player-state').on('click', player_playstop); + player.playstop(); + if(navigator.userAgent.match(/(\(iPod|\(iPhone|\(iPad)/)) { + $('#player-volume').prop('disabled', true); + this.repaintVolumeControls(); + } else { + $('#player-volume').on('change input', player_updatevolume); + $('#player-mute').on('click', player_togglemute); + } + $('#fullscreen').on('click', function(event) { + event.preventDefault(); + player.fullscreen(); + }); + + $(document).on('keypress', function(e) { + if(e.which == 32) { + player.playstop(); + } + }); +} + +function player_playstop() { + player.playstop(); +} + +function player_updatevolume() { + player.updatevolume(); +} + +function player_togglemute() { + player.togglemute(); +} diff --git a/contrib/site/style.css b/contrib/site/style.css index f09f5c5..dc65fc7 100644 --- a/contrib/site/style.css +++ b/contrib/site/style.css @@ -54,6 +54,7 @@ td span a { font-size: 0.8em; text-decoration: none; padding: 0 0.2em; + white-space: nowrap; } td span a:hover { @@ -64,20 +65,13 @@ td span.selected { font-weight: bold; } -#video-overlay-inner { - background-image: url('images/play-big.png'); - background-repeat: no-repeat; - background-position: center; - width: 100%; - height: 100%; -} - -video { - background-image: url('images/elevate-turm.png'); - background-repeat: no-repeat; - background-position: center; - width: 100%; - height: 100%; +video, .turm { + background-color: #FFE924; + background-image: url('images/elevate-turm.png'); + background-repeat: no-repeat; + background-position: center; + width: 100%; + height: 100%; } div#controls { @@ -111,3 +105,188 @@ table#logos { background-color: rgba(51,51,51,0.4); } */ + + + + + + +/* +helsinki player styles +*/ +#player-box { + margin-bottom: 1.3em; +} + +#player { + margin-bottom: 1em; +} + +#player a { + color: black; +} + +#player-playstop { + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + width: 176px; + height: 176px; +} + +#player-playstop-overlay { + width: 176px; + height: 176px; + background-color: rgba(255,255,255,0.5); + position: absolute; + display: block; +} + +#video-overlay-inner { + width: 125px; + height: 125px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: 0 0; /* play button big */ +} + +#player-ctrl { + margin-top: 0.3em; + width: 260px; + height: 32px; + margin-left: auto; + margin-right: auto; + background-color: #434343; + padding: 10px; +} + +#player-state { + position: relative; + top: 3px; + float: left; + width: 25px; + height: 25px; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: 0px -125px; /* play button */ +} + +#player-volume { + position: relative; + top: 2px; + right: -16px; + width: 150px; + background: transparent; + /*fix for FF unable to apply focus style bug */ + /* border: 1px solid #434343; */ + border: none; + -webkit-appearance: none; + -webkit-box-shadow: none!important; + -moz-box-shadow: none!important; + box-shadow: none!important; +} +#player-volume:focus { + outline: none; + -webkit-box-shadow: none!important; + -moz-box-shadow: none!important; + box-shadow: none!important; +} +/* webkit based browser */ +#player-volume::-webkit-slider-runnable-track { + width: 150px; + height: 5px; + background: #888; + border: 0; + border-radius: 3px; +} +#player-volume:disabled::-webkit-slider-runnable-track { + background: #545454; +} +#player-volume::-webkit-slider-thumb { + -webkit-appearance: none; + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; + margin-top: -5px; +} +#player-volume:disabled::-webkit-slider-thumb { + background: #656565; +} +/* mozilla firefox */ +#player-volume::-moz-range-track { + width: 150px; + height: 5px; + background: #888; + border: 0; + border-radius: 3px; +} +#player-volume:disabled::-moz-range-track { + background: #545454; +} +#player-volume::-moz-range-thumb { + border: 0; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; +} +#player-volume:disabled::-moz-range-thumb { + background: #656565; +} +#player-volume::-moz-focus-outer { + border: 0; +} +/* microsoft browser */ +#player-volume::-ms-track { + width: 150px; + height: 5px; + background: transparent; + border-color: transparent; + border-width: 6px 0; + color: transparent; +} +#player-volume::-ms-fill-lower { + background: #888; + border-radius: 10px; +} +#player-volume:disabled::-ms-fill-lower { + background: #545454; +} +#player-volume::-ms-fill-upper { + background: #888; + border-radius: 10px; +} +#player-volume:disabled::-ms-fill-upper { + background: #545454; +} +#player-volume::-ms-thumb { + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; +} +#player-volume:disabled::-ms-thumb { + background: #656565; +} +#player-volume::-ms-tooltip { + display: none; +} + +#player-mute { + position: relative; + top: 3px; + float: right; + width: 25px; + height: 25px; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: -75px -150px; /* volume high */ +} -- cgit v1.2.3