Buttons that toggle state now switch their tooltips as appropriate
This commit is contained in:
Erik Thuning
parent
6588386571
commit
74203f4807
38
index.html
38
index.html
@ -23,7 +23,10 @@
|
||||
</div>
|
||||
<div id="about">
|
||||
<button id="playlist-button" class="playlist hidden"
|
||||
title="Visa spellista">
|
||||
title="Visa spellista"
|
||||
data-title_alt="Dölj spellista"
|
||||
data-title_en="Show playlist"
|
||||
data-title_alt_en="Hide playlist">
|
||||
<svg>
|
||||
<use href="#playlist-icon"></use>
|
||||
<use href="#close-icon" class="hidden"></use>
|
||||
@ -42,27 +45,33 @@
|
||||
</div>
|
||||
<div id="left-controls" class="control-box">
|
||||
<button id="previous" class="playlist hidden"
|
||||
title="Föregående">
|
||||
title="Föregående"
|
||||
data-title_en="Previous">
|
||||
<svg>
|
||||
<use href="#previous-icon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="play-button"
|
||||
title="Spela">
|
||||
title="Spela"
|
||||
data-title_alt="Pausa"
|
||||
data-title_en="Play"
|
||||
data-title_alt_en="Pause">
|
||||
<svg>
|
||||
<use href="#play-icon"></use>
|
||||
<use href="#pause-icon" class="hidden"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="next" class="playlist hidden"
|
||||
title="Nästa">
|
||||
title="Nästa"
|
||||
data-title_en="Next">
|
||||
<svg>
|
||||
<use href="#next-icon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="select" id="speed-select">
|
||||
<button id="speed-current"
|
||||
title="Välj hastighet">1</button>
|
||||
title="Välj hastighet"
|
||||
data-title_en="Speed selection">1</button>
|
||||
<ul class="list" id="speed-list">
|
||||
<li>
|
||||
<button>2</button>
|
||||
@ -85,7 +94,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
<button id="volume-button"
|
||||
title="Stäng av ljud">
|
||||
title="Stäng av ljud"
|
||||
data-title_alt="Slå på ljud"
|
||||
data-title_en="Mute"
|
||||
data-title_alt_en="Unmute">
|
||||
<svg>
|
||||
<use href="#volume-icon"></use>
|
||||
<use href="#mute-icon" class="hidden"></use>
|
||||
@ -104,13 +116,17 @@
|
||||
</div>
|
||||
<div id="right-controls" class="control-box">
|
||||
<button id="timelink-button"
|
||||
title="Kopiera länk till den här tidpunkten">
|
||||
title="Kopiera länk till den här tidpunkten"
|
||||
data-title_en="Copy URL at current time">
|
||||
<svg>
|
||||
<use href="#timelink-icon">
|
||||
</svg>
|
||||
</button>
|
||||
<button id="subtitles-button"
|
||||
title="Undertexter är av">
|
||||
title="Undertexter är av"
|
||||
data-title_alt="Undertexter är på"
|
||||
data-title_en="Subtitles are off"
|
||||
data-title_alt_en="Subtitles are on">
|
||||
<svg>
|
||||
<use href="#subtitles-off-icon"></use>
|
||||
<use href="#subtitles-on-icon" class="hidden"></use>
|
||||
@ -118,12 +134,14 @@
|
||||
</button>
|
||||
<div class="select" id="resolution-select">
|
||||
<button id="resolution-current"
|
||||
title="Välj upplösning"></button>
|
||||
title="Välj upplösning"
|
||||
data-title_en="Resolution selection"></button>
|
||||
<ul class="list" id="resolution-list">
|
||||
</ul>
|
||||
</div>
|
||||
<button id="fullscreen-button"
|
||||
title="Helskärm">
|
||||
title="Helskärm"
|
||||
data-title_en="Fullscreen">
|
||||
<svg>
|
||||
<use href="#fullscreen-enter-icon"></use>
|
||||
<use href="#fullscreen-exit-icon" class="hidden"></use>
|
||||
|
||||
25
player.js
25
player.js
@ -159,6 +159,12 @@ function setCookie(name, value) {
|
||||
document.cookie = cookie
|
||||
}
|
||||
|
||||
function swapText(element) {
|
||||
var oldtext = element.title
|
||||
element.title = element.dataset['title_alt']
|
||||
element.dataset['title_alt'] = oldtext
|
||||
}
|
||||
|
||||
function loadStreams(presentation, mainstream, defaultres) {
|
||||
var streamlist = presentation.sources
|
||||
var token = presentation.token
|
||||
@ -262,6 +268,7 @@ function setupCopying(mainstream) {
|
||||
function setupFullscreen() {
|
||||
var body = document.querySelector('body')
|
||||
var icons = document.querySelectorAll('#fullscreen-button > svg > use')
|
||||
var button = document.querySelector('#fullscreen-button')
|
||||
|
||||
function toggleFullscreen(event) {
|
||||
if(document.fullscreenElement) {
|
||||
@ -271,9 +278,9 @@ function setupFullscreen() {
|
||||
}
|
||||
icons.forEach(function(icon) {
|
||||
icon.classList.toggle('hidden')})
|
||||
swapText(button)
|
||||
}
|
||||
|
||||
var button = document.querySelector('#fullscreen-button')
|
||||
button.addEventListener('click', toggleFullscreen)
|
||||
}
|
||||
|
||||
@ -354,6 +361,7 @@ function setupLoader(mainstream) {
|
||||
|
||||
function setupPlayback(body, mainstream) {
|
||||
var selector = 'hidden'
|
||||
var button = document.querySelector('#play-button')
|
||||
var playing = false
|
||||
var videos = document.querySelectorAll('video')
|
||||
|
||||
@ -371,6 +379,7 @@ function setupPlayback(body, mainstream) {
|
||||
document.querySelectorAll('#play-button use, .main .fade > use')
|
||||
.forEach(function(elem) {
|
||||
elem.classList.toggle(selector)})
|
||||
swapText(button)
|
||||
}
|
||||
function rewind() {
|
||||
togglePlayback()
|
||||
@ -405,11 +414,13 @@ function setupPlaylist(body, playlistfile) {
|
||||
function doSetup(playlist) {
|
||||
var template = document.getElementById('listitem-template')
|
||||
var parent = document.querySelector('#playlist')
|
||||
var button = document.querySelector('#playlist-button')
|
||||
function togglePlaylist(event) {
|
||||
document.querySelector('#about').classList.toggle('expand')
|
||||
document.querySelectorAll('#playlist-button > svg > use, h1, h2')
|
||||
.forEach(function(icon) {
|
||||
icon.classList.toggle('hidden')})
|
||||
swapText(button)
|
||||
}
|
||||
function switchPresentation(event) {
|
||||
var myid = document.querySelector('body').dataset.id
|
||||
@ -422,8 +433,7 @@ function setupPlaylist(body, playlistfile) {
|
||||
}
|
||||
window.location.href = sibling.querySelector('a').href
|
||||
}
|
||||
document.querySelector('#playlist-button')
|
||||
.addEventListener('click', togglePlaylist)
|
||||
button.addEventListener('click', togglePlaylist)
|
||||
document.querySelectorAll('#previous, #next')
|
||||
.forEach(function(button) {
|
||||
button.addEventListener('click', switchPresentation)})
|
||||
@ -580,8 +590,10 @@ function setupSpeed() {
|
||||
}
|
||||
|
||||
function setupSubs(subs) {
|
||||
var button = document.querySelector('#subtitles-button')
|
||||
var icons = document.querySelectorAll('#subtitles-button > svg > use')
|
||||
|
||||
if(!subs) {
|
||||
var button = document.querySelector('#subtitles-button')
|
||||
button.parentNode.removeChild(button)
|
||||
return
|
||||
}
|
||||
@ -592,8 +604,6 @@ function setupSubs(subs) {
|
||||
stream.appendChild(subtrack)
|
||||
})
|
||||
|
||||
var icons = document.querySelectorAll('#subtitles-button > svg > use')
|
||||
|
||||
function toggleSubs(event) {
|
||||
icons.forEach(function(icon) {
|
||||
icon.classList.toggle('hidden')})
|
||||
@ -604,6 +614,7 @@ function setupSubs(subs) {
|
||||
} else {
|
||||
track.mode = 'disabled'
|
||||
}
|
||||
swapText(button)
|
||||
}
|
||||
document.querySelector('#subtitles-button')
|
||||
.addEventListener('click', toggleSubs)
|
||||
@ -647,6 +658,7 @@ function setupSync(mainstream) {
|
||||
|
||||
function setupVolume(soundstream) {
|
||||
var icons = document.querySelectorAll('#volume-button > svg > use')
|
||||
var button = document.querySelector('#volume-button')
|
||||
var volume = document.querySelector('#volume')
|
||||
var muted = false
|
||||
var mutedVol = 0
|
||||
@ -670,6 +682,7 @@ function setupVolume(soundstream) {
|
||||
}
|
||||
icons.forEach(function(icon) {
|
||||
icon.classList.toggle('hidden')})
|
||||
swapText(button)
|
||||
}
|
||||
function slideVolume(event) {
|
||||
soundstream.volume = event.currentTarget.value
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user