diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index ef40fe7..b7af455 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -13,10 +13,6 @@ body {
*/
.sidebar {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
z-index: 100; /* Behind the navbar */
padding: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
diff --git a/src/css/player.css b/src/css/player.css
index c7a5472..533cf41 100644
--- a/src/css/player.css
+++ b/src/css/player.css
@@ -56,38 +56,34 @@ body {
bottom: 0;
left: 0;
right: 0;
+ display: flex;
}
-.controls .inline {
- float: left;
- display: inline-block;
-}
-.controls .ilbtn {
- font-size: 200%;
+.controls .button {
+ font-size: 2rem;
width: 40px;
cursor: pointer;
padding: 4px;
}
-#duration {
- line-height: 2.4;
- font-size: 110%;
- display: inline-block;
- margin-left: 5px;
+.flex-divider {
+ flex-grow: 1;
}
-.controls .right {
- float: right;
+#duration {
+ line-height: 2.6;
+ font-size: 1.1rem;
display: inline-block;
}
.bigplaybtn {
color: #fff;
font-size: 400%;
position: absolute;
- top: 40%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
margin: auto;
width: 80px;
height: 80px;
line-height: 1.2;
- left: 0;
- right: 0;
background-color: rgba(3, 169, 244, 0.7);
padding: 10px;
border-radius: 100%;
@@ -101,7 +97,11 @@ body {
left: 3px;
}
.bigplaybtn.hidden {
- opacity: 0;
+ display: none;
+}
+.seekview {
+ display: flex;
+ padding-right: 0.5rem;
}
.seekview .seeker {
display: none;
@@ -109,6 +109,7 @@ body {
height: 10px;
background-color: #9be0ff;
cursor: pointer;
+ margin: auto;
}
.seeker .seekbar {
background-color: #00b0ff;
diff --git a/src/player.js b/src/player.js
index 0405dbc..fc35219 100644
--- a/src/player.js
+++ b/src/player.js
@@ -1,106 +1,27 @@
import Hls from 'hls.js'
-let player
-let vid
-let btn
-let bigbtn
-let overlay
-let time
-let fscrn
-let mutebtn
-let hideTimeout
+// Elements
+let player = document.querySelector('.livecnt')
+let vid = player.querySelector('#stream')
+let overlay = player.querySelector('.overlay')
+let btn = overlay.querySelector('#playbtn')
+let time = overlay.querySelector('#duration')
+let fullscreenbtn = overlay.querySelector('#fullscrbtn')
+let mutebtn = overlay.querySelector('#mutebtn')
+let lstat = overlay.querySelector('.live')
+let opts = overlay.querySelector('.controls')
+let bigbtn = overlay.querySelector('.bigplaybtn')
+let volumebar = overlay.querySelector('#volume_seek')
+let volumeseek = volumebar.querySelector('.seeker')
+let volumeseekInner = volumeseek.querySelector('.seekbar')
+
+// Variables
let hls
-let lstat
-let opts
-let volumebar
-let retry
+let hideTimeout
+let retryTimeout
let vidReady = false
let shouldHide = true
-let infscr = false
-
-window.onload = function (argument) {
- player = document.querySelector('.livecnt')
- vid = player.querySelector('#stream')
- overlay = player.querySelector('.overlay')
- btn = overlay.querySelector('#playbtn')
- time = overlay.querySelector('#duration')
- fscrn = overlay.querySelector('#fullscrbtn')
- mutebtn = overlay.querySelector('#mutebtn')
- lstat = overlay.querySelector('.live')
- opts = overlay.querySelector('.controls')
- bigbtn = overlay.querySelector('.bigplaybtn')
- volumebar = overlay.querySelector('#volume_seek')
-
- player.addEventListener('mousemove', resetHide)
-
- opts.addEventListener('mouseenter', () => {
- shouldHide = false
- })
-
- opts.addEventListener('mouseleave', () => {
- shouldHide = true
- })
-
- opts.addEventListener('mousemove', () => {
- shouldHide = false
- })
-
- bigbtn.addEventListener('click', () => {
- toggleStream()
- })
-
- volumebar.addEventListener('click', (e) => {
- vid.volume = ((e.pageX - volumebar.offsetLeft) / volumebar.clientWidth)
- updateVolume()
- })
-
- let mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel'
-
- mutebtn.addEventListener(mousewheelevt, (e) => {
- e.preventDefault()
- let scrollAmnt = (e.wheelDelta == null ? e.detail * -40 : e.wheelDelta)
-
- if (scrollAmnt < 0) {
- vid.volume = clampAddition(-0.1)
- } else {
- vid.volume = clampAddition(0.1)
- }
-
- updateVolume()
- }, false)
-
- if (Hls.isSupported()) {
- hls = new Hls()
- hls.loadSource(STREAM_SERVER + STREAM_NAME + '.m3u8')
- hls.attachMedia(vid)
- hls.on(Hls.Events.MANIFEST_PARSED, () => {
- vidReady = true
- liveStatus(true)
- })
- hls.on(Hls.Events.ERROR, (e) => {
- vidReady = false
- liveStatus(false)
-
- if (!vid.paused) {
- toggleStream()
- resetHide()
- }
- })
- } else {
- alert('Your browser does not support HLS streaming!')
- }
-
- playbtn.addEventListener('click', toggleStream)
- mutebtn.addEventListener('click', toggleSound)
- fscrn.addEventListener('click', toggleFullscreen)
-
- document.addEventListener('webkitfullscreenchange', exitHandler, false)
- document.addEventListener('mozfullscreenchange', exitHandler, false)
- document.addEventListener('fullscreenchange', exitHandler, false)
- document.addEventListener('MSFullscreenChange', exitHandler, false)
-
- vid.addEventListener('timeupdate', updateTime)
-}
+let inFullscreen = false
function clampAddition (val) {
let volume = vid.volume
@@ -125,22 +46,21 @@ function showBigBtn (show) {
}
function updateVolume () {
- let inner = volumebar.querySelector('.seekbar')
- inner.style.width = vid.volume * 100 + '%'
+ volumeseekInner.style.width = vid.volume * 100 + '%'
}
function liveStatus (status) {
if (status) {
lstat.innerHTML = 'live now'
lstat.className = 'live'
- clearTimeout(retry)
+ clearTimeout(retryTimeout)
if (vid.paused) {
showBigBtn(true)
}
} else {
lstat.innerHTML = 'offline'
lstat.className = 'live offline'
- retry = setTimeout(() => {
+ retryTimeout = setTimeout(() => {
if (vidReady) return
hls.loadSource(STREAM_SERVER + STREAM_NAME + '.m3u8')
}, 10000)
@@ -201,13 +121,13 @@ function toggleSound () {
function exitHandler () {
if (!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen)) {
- infscr = false
+ inFullscreen = false
}
- if (infscr) {
- fscrn.innerHTML = ''
+ if (inFullscreen) {
+ fullscreenbtn.innerHTML = ''
} else {
- fscrn.innerHTML = ''
+ fullscreenbtn.innerHTML = ''
}
}
@@ -215,21 +135,21 @@ function toggleFullscreen () {
if (vid.enterFullscreen) {
if (!document.fullScreen) {
player.requestFullScreen()
- infscr = true
+ inFullscreen = true
} else {
document.cancelFullScreen()
}
} else if (vid.webkitEnterFullscreen) {
if (!document.webkitIsFullScreen) {
player.webkitRequestFullScreen()
- infscr = true
+ inFullscreen = true
} else {
document.webkitCancelFullScreen()
}
} else if (vid.mozRequestFullScreen) {
if (!document.mozFullScreen) {
player.mozRequestFullScreen()
- infscr = true
+ inFullscreen = true
} else {
document.mozCancelFullScreen()
}
@@ -238,10 +158,80 @@ function toggleFullscreen () {
}
}
-window.onblur = () => {
+window.addEventListener('onblur', () => {
shouldHide = true
+}, false)
+
+window.addEventListener('onfocus', () => {
+ shouldHide = true
+}, false)
+
+player.addEventListener('mousemove', resetHide)
+
+opts.addEventListener('mouseenter', () => {
+ shouldHide = false
+})
+
+opts.addEventListener('mouseleave', () => {
+ shouldHide = true
+})
+
+opts.addEventListener('mousemove', () => {
+ shouldHide = false
+})
+
+bigbtn.addEventListener('click', () => {
+ toggleStream()
+})
+
+volumeseek.addEventListener('click', (e) => {
+ vid.volume = ((e.pageX - volumeseek.offsetLeft) / volumeseek.clientWidth)
+ updateVolume()
+})
+
+let mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel'
+
+volumebar.addEventListener(mousewheelevt, (e) => {
+ e.preventDefault()
+ let scrollAmnt = (e.wheelDelta == null ? e.detail * -40 : e.wheelDelta)
+
+ if (scrollAmnt < 0) {
+ vid.volume = clampAddition(-0.1)
+ } else {
+ vid.volume = clampAddition(0.1)
+ }
+
+ updateVolume()
+}, false)
+
+if (Hls.isSupported()) {
+ hls = new Hls()
+ hls.loadSource(STREAM_SERVER + STREAM_NAME + '.m3u8')
+ hls.attachMedia(vid)
+ hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ vidReady = true
+ liveStatus(true)
+ })
+ hls.on(Hls.Events.ERROR, (e) => {
+ vidReady = false
+ liveStatus(false)
+
+ if (!vid.paused) {
+ toggleStream()
+ resetHide()
+ }
+ })
+} else {
+ alert('Your browser does not support HLS streaming!')
}
-window.onfocus = () => {
- shouldHide = true
-}
+playbtn.addEventListener('click', toggleStream)
+mutebtn.addEventListener('click', toggleSound)
+fullscreenbtn.addEventListener('click', toggleFullscreen)
+
+document.addEventListener('webkitfullscreenchange', exitHandler, false)
+document.addEventListener('mozfullscreenchange', exitHandler, false)
+document.addEventListener('fullscreenchange', exitHandler, false)
+document.addEventListener('MSFullscreenChange', exitHandler, false)
+
+vid.addEventListener('timeupdate', updateTime, false)
diff --git a/templates/index.html b/templates/index.html
index 6fef3eb..33b0c8c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -37,7 +37,7 @@
diff --git a/templates/player.html b/templates/player.html
index 4b0c3bc..2b135dd 100644
--- a/templates/player.html
+++ b/templates/player.html
@@ -19,15 +19,16 @@
offline