IcyNetwork/icytv
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A lil cleanup

Browse Source
This commit is contained in:
Evert Prants 2019-04-17 12:29:18 +03:00
parent 8215ac5fb6
commit 8201e932fc
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
5 changed files with 128 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/dashboard.css
View File

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

35
src/css/player.css
View File

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

216
src/player.js
View File

@ -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 = '<i class="fa fa-compress fa-fw"></i>'
if (inFullscreen) {
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)
}
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)

2
templates/index.html
View File

@ -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>

11
templates/player.html
View File

@ -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>
<span class="seekview">
<div id="mutebtn" class="inline ilbtn"><i class="fa fa-volume-up fa-fw"></i></div>
<div class="seeker" id="volume_seek">
<div id="playbtn" class="button"><i class="fa fa-play fa-fw"></i></div>
<span class="seekview" id="volume_seek">
<div id="mutebtn" class="button"><i class="fa fa-volume-up fa-fw"></i></div>
<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>