A lil cleanup

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);

src/css/player.css

@@ -56,38 +56,34 @@ body {
     bottom: 0;
     left: 0;
     right: 0;
+    display: flex;
 }
-.controls .inline {
+.controls .button {
-    float: left;
+    font-size: 2rem;
-    display: inline-block;
-}
-.controls .ilbtn {
-    font-size: 200%;
     width: 40px;
     cursor: pointer;
     padding: 4px;
 }
-#duration {
+.flex-divider {
-    line-height: 2.4;
+    flex-grow: 1;
-    font-size: 110%;
-    display: inline-block;
-    margin-left: 5px;
 }
-.controls .right {
+#duration {
-    float: right;
+    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;

src/player.js

@@ -1,106 +1,27 @@
 import Hls from 'hls.js'
 
-let player
+// Elements
-let vid
+let player = document.querySelector('.livecnt')
-let btn
+let vid = player.querySelector('#stream')
-let bigbtn
+let overlay = player.querySelector('.overlay')
-let overlay
+let btn = overlay.querySelector('#playbtn')
-let time
+let time = overlay.querySelector('#duration')
-let fscrn
+let fullscreenbtn = overlay.querySelector('#fullscrbtn')
-let mutebtn
+let mutebtn = overlay.querySelector('#mutebtn')
-let hideTimeout
+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 hideTimeout
-let opts
+let retryTimeout
-let volumebar
-let retry
 let vidReady = false
 let shouldHide = true
-let infscr = false
+let inFullscreen = 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)
-}
 
 function clampAddition (val) {
   let volume = vid.volume
@@ -125,22 +46,21 @@ function showBigBtn (show) {
 }
 
 function updateVolume () {
-  let inner = volumebar.querySelector('.seekbar')
+  volumeseekInner.style.width = vid.volume * 100 + '%'
-  inner.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) {
+  if (inFullscreen) {
-    fscrn.innerHTML = '<i class="fa fa-compress fa-fw"></i>'
+    fullscreenbtn.innerHTML = '<i class="fa fa-compress fa-fw"></i>'
   } else {
-    fscrn.innerHTML = '<i class="fa fa-expand fa-fw"></i>'
+    fullscreenbtn.innerHTML = '<i class="fa fa-expand fa-fw"></i>'
   }
 }
 
@@ -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)
   }
 
-window.onfocus = () => {
+  updateVolume()
-  shouldHide = true
+}, 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)
+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)

templates/index.html

@@ -37,7 +37,7 @@
 
 				<footer class="mastfoot mt-auto">
 					<div class="inner">
-						<p>Copyleft &copy; 2018 - <a href="https://icynet.eu/" target="_blank">Icy Network</a></p>
+						<p>Copyleft &copy; 2019 - <a href="https://icynet.eu/" target="_blank">Icy Network</a></p>
 					</div>
 				</footer>
 			</div>

templates/player.html

@@ -19,15 +19,16 @@
 				<div class="live offline">offline</div>
 				<div class="bigplaybtn hidden"><i class="fa fa-play fa-fw"></i></div>
 				<div class="controls">
-					<div id="playbtn" class="inline ilbtn"><i class="fa fa-play fa-fw"></i></div>
+					<div id="playbtn" class="button"><i class="fa fa-play fa-fw"></i></div>
-					<span class="seekview">
+					<span class="seekview" id="volume_seek">
-						<div id="mutebtn" class="inline ilbtn"><i class="fa fa-volume-up fa-fw"></i></div>
+						<div id="mutebtn" class="button"><i class="fa fa-volume-up fa-fw"></i></div>
-						<div class="seeker" id="volume_seek">
+						<div class="seeker">
 							<div class="seekbar" style="width: 100%"></div>
 						</div>
 					</span>
 					<div id="duration">0:00</div>
-					<div id="fullscrbtn" class="right ilbtn"><i class="fa fa-expand fa-fw"></i></div>
+					<div class="flex-divider"></div>
+					<div id="fullscrbtn" class="right button"><i class="fa fa-expand fa-fw"></i></div>
 				</div>
 			</div>
 		</div>