Commit 4a0630be authored by Matt Mascarenhas's avatar Matt Mascarenhas

cinera.c: Reference and player tweaks

Different ISBN database, and slightly more flexible BuildReference()
Permit line-breaking on '/' in the references menu

cinera.css and cinera_player*.js:
More subtle "click here to regain focus" - for @insofaras
Persist theatre mode - for @insofaras
Resume in-progress video at previous timecode - for @AsafGartner
parent 8d75865c
This diff is collapsed.
...@@ -131,17 +131,6 @@ ...@@ -131,17 +131,6 @@
flex: 1; flex: 1;
} }
.cineraMenus > #focus-warn {
background-color: rgba(0, 0, 0, 0.8);
border-radius: 16px;
color: #F00;
flex: 1;
margin: 0 auto 0 50%;
display: none;
z-index: 16;
position: absolute;
}
.cineraMenus > .menu { .cineraMenus > .menu {
position: relative; position: relative;
} }
......
...@@ -184,6 +184,16 @@ if(creditsMenu) ...@@ -184,6 +184,16 @@ if(creditsMenu)
var sourceMenus = titleBar.querySelectorAll(".menu"); var sourceMenus = titleBar.querySelectorAll(".menu");
var helpButton = titleBar.querySelector(".help"); var helpButton = titleBar.querySelector(".help");
window.addEventListener("blur", function(){
helpButton.firstElementChild.innerText = "¿";
helpButton.firstElementChild.title = "Keypresses will not pass through to Cinera because focus is currently elsewhere.\n\nTo regain focus, please press Tab / Shift-Tab (multiple times) or click somewhere related to Cinera other than the video, e.g. this button";
});
window.addEventListener("focus", function(){
helpButton.firstElementChild.innerText = "?";
helpButton.firstElementChild.title = ""
});
var helpDocumentation = helpButton.querySelector(".help_container"); var helpDocumentation = helpButton.querySelector(".help_container");
helpButton.addEventListener("click", function(ev) { helpButton.addEventListener("click", function(ev) {
handleMouseOverMenu(this, ev.type); handleMouseOverMenu(this, ev.type);
...@@ -196,6 +206,13 @@ var playerContainer = document.querySelector(".cineraPlayerContainer") ...@@ -196,6 +206,13 @@ var playerContainer = document.querySelector(".cineraPlayerContainer")
var cinera = playerContainer.parentNode; var cinera = playerContainer.parentNode;
var player = new Player(playerContainer, onRefChanged); var player = new Player(playerContainer, onRefChanged);
var cineraViewStorageItem = "cineraView";
if(viewsMenu && localStorage.getItem(cineraViewStorageItem))
{
toggleTheatreMode();
}
window.addEventListener("resize", function() { player.updateSize(); }); window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keydown", function(ev) { document.addEventListener("keydown", function(ev) {
var key = ev.key; var key = ev.key;
...@@ -224,14 +241,6 @@ var prevEpisode = playerContainer.querySelector(".episodeMarker.prev"); ...@@ -224,14 +241,6 @@ var prevEpisode = playerContainer.querySelector(".episodeMarker.prev");
var nextEpisode = playerContainer.querySelector(".episodeMarker.next"); var nextEpisode = playerContainer.querySelector(".episodeMarker.next");
var testMarkers = playerContainer.querySelectorAll(".marker"); var testMarkers = playerContainer.querySelectorAll(".marker");
window.addEventListener("blur", function(){
document.getElementById("focus-warn").style.display = "block";
});
window.addEventListener("focus", function(){
document.getElementById("focus-warn").style.display = "none";
});
var colouredItems = playerContainer.querySelectorAll(".author, .member, .project"); var colouredItems = playerContainer.querySelectorAll(".author, .member, .project");
for(i = 0; i < colouredItems.length; ++i) for(i = 0; i < colouredItems.length; ++i)
{ {
...@@ -244,6 +253,12 @@ for(var i = 0; i < topicDots.length; ++i) ...@@ -244,6 +253,12 @@ for(var i = 0; i < topicDots.length; ++i)
setDotLightness(topicDots[i]); setDotLightness(topicDots[i]);
} }
var lastAnnotationStorageItem = "cineraTimecode_" + window.location.pathname;
var lastAnnotation;
if(location.hash) { if(location.hash) {
player.setTime(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash); player.setTime(location.hash.startsWith('#') ? location.hash.substr(1) : location.hash);
} }
else if(lastAnnotation = localStorage.getItem(lastAnnotationStorageItem))
{
player.setTime(lastAnnotation);
}
...@@ -228,6 +228,14 @@ Player.prototype.updateProgress = function() { ...@@ -228,6 +228,14 @@ Player.prototype.updateProgress = function() {
} }
if (this.currentMarker) { if (this.currentMarker) {
if(this.currentMarkerIdx == this.markers.length - 1)
{
localStorage.removeItem(lastAnnotationStorageItem);
}
else
{
localStorage.setItem(lastAnnotationStorageItem, this.currentMarker.timestamp);
}
this.currentMarker.el.classList.add("current"); this.currentMarker.el.classList.add("current");
this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0; this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0;
this.scrollPosition = this.markersContainer.scrollTop; this.scrollPosition = this.markersContainer.scrollTop;
...@@ -283,12 +291,16 @@ Player.prototype.onYoutubePlayerStateChange = function(ev) { ...@@ -283,12 +291,16 @@ Player.prototype.onYoutubePlayerStateChange = function(ev) {
if (ev.data == YT.PlayerState.PLAYING) { if (ev.data == YT.PlayerState.PLAYING) {
this.playing = true; this.playing = true;
this.currentTime = this.youtubePlayer.getCurrentTime(); this.currentTime = this.youtubePlayer.getCurrentTime();
} else if (ev.data == YT.PlayerState.PAUSED || ev.data == YT.PlayerState.BUFFERING) {
this.playing = false;
this.currentTime = this.youtubePlayer.getCurrentTime();
this.updateProgress();
} else { } else {
this.playing = false; this.playing = false;
if (ev.data == YT.PlayerState.PAUSED || ev.data == YT.PlayerState.BUFFERING) {
this.currentTime = this.youtubePlayer.getCurrentTime();
this.updateProgress();
} else if (ev.data == YT.PlayerState.ENDED) {
localStorage.removeItem(lastAnnotationStorageItem);
this.currentTime = null;
this.updateProgress();
}
} }
this.buffering = ev.data == YT.PlayerState.BUFFERING; this.buffering = ev.data == YT.PlayerState.BUFFERING;
...@@ -482,7 +494,7 @@ function toggleTheatreMode() { ...@@ -482,7 +494,7 @@ function toggleTheatreMode() {
viewItems[0].setAttribute("data-id", "regular"); viewItems[0].setAttribute("data-id", "regular");
viewItems[0].setAttribute("title", "Regular mode"); viewItems[0].setAttribute("title", "Regular mode");
viewItems[0].firstChild.nodeValue = "📺"; viewItems[0].firstChild.nodeValue = "📺";
} cineraProps.V = views.THEATRE; break; } cineraProps.V = views.THEATRE; localStorage.setItem(cineraViewStorageItem, views.THEATRE); break;
case views.SUPERTHEATRE: case views.SUPERTHEATRE:
{ {
leaveFullScreen_(); leaveFullScreen_();
...@@ -502,7 +514,7 @@ function toggleTheatreMode() { ...@@ -502,7 +514,7 @@ function toggleTheatreMode() {
viewItems[0].setAttribute("data-id", "theatre"); viewItems[0].setAttribute("data-id", "theatre");
viewItems[0].setAttribute("title", "Theatre mode"); viewItems[0].setAttribute("title", "Theatre mode");
viewItems[0].firstChild.nodeValue = "🎭"; viewItems[0].firstChild.nodeValue = "🎭";
} cineraProps.V = views.REGULAR; break; } cineraProps.V = views.REGULAR; localStorage.removeItem(cineraViewStorageItem); break;
} }
player.updateSize(); player.updateSize();
} }
...@@ -518,12 +530,12 @@ function toggleSuperTheatreMode() ...@@ -518,12 +530,12 @@ function toggleSuperTheatreMode()
case views.THEATRE: case views.THEATRE:
{ {
enterFullScreen_(); enterFullScreen_();
} cineraProps.V = views.SUPERTHEATRE; break; } cineraProps.V = views.SUPERTHEATRE; localStorage.setItem(cineraViewStorageItem, views.SUPERTHEATRE); break;
case views.SUPERTHEATRE: case views.SUPERTHEATRE:
{ {
leaveFullScreen_(); leaveFullScreen_();
toggleTheatreMode(); toggleTheatreMode();
} cineraProps.V = views.REGULAR; break; } cineraProps.V = views.REGULAR; localStorage.removeItem(cineraViewStorageItem); break;
} }
player.updateSize(); player.updateSize();
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment