Jump to content

Topic on Extension talk:TimedMediaHandler/VideoJS Player

Audio files with TimedText open in pop-up overlay

8
EstherLoer (talkcontribs)

If an audio file has timed text, the legacy player (k-player) opened a box above it to show the text, whereas the new player opens a new player in a pop-up overlay which prevents scrolling.

I suggest implementing the box above the player for timed text.

A workaround is opening the same file in a new tab. However, that is less convenient.

TheDJ (talkcontribs)

This is something that has been highlighted before, but we don't want to add too much complexity as we introduce a new player. Having multiple modes and custom UI really complicates lots of things and the k-player box itself also had lots of downsides of its own honestly.

New UI models might follow later on as we get a better grip on what is handy and how we can best support this.

EstherLoer (talkcontribs)

I see, thanks. A player that is integrated within the page layout simply feels more natural than a pop-up, since pretty much all video platforms do it.

If the pop-up view will remain, I suggest still allowing scrolling while it remains fixed on screen. For reference, Dailymotion and Vimeo use a top bar when the user scrolls down, and Vlare.TV (archive) used a picture-in-picture player.

"YouTube mini player" user script code could also be useful.

Hopefully I could help.

TheDJ (talkcontribs)

But most of them don’t feature audio with subtitles. We are pretty unique in that regard.

EstherLoer (talkcontribs)

Indeed, though their video subtitles still appear within the player, and audio is simply like video minus the picture.

YouTube also has a transcript sidebar feature, where subtitles appear with time stamps in a sidebar, but for that purpose we already have TimedText pages where both the text and player appear. However, even on the TimedText page, the new player appears in a pop-up overlay that blocks scrolling, which prevents playing the audio and reading the transcript simultaneously. This makes the pop-up overlay appear like more trouble than it's worth.

I don't see how having the player in the layout would add significant complexity. It is the same interface, just not in a pop-up.

Thanks anyway.

TheDJ (talkcontribs)

"I don't see how having the player in the layout would add significant complexity." Patches are welcome.

EstherLoer (talkcontribs)

Here is a tiny script which demonstrates moving the pop-up player inside the layout.

document.getElementById("file").onclick = function() { setTimeout(
		function() {
// Shortcuts
var player = document.getElementById("mwe_player_0");
var source = player.parentElement.parentElement;
var target = document.getElementsByClassName("fullMedia")[0];

if (document.title.search(/^File:/)  == 0 && document.getElementsByClassName("oo-ui-window-frame")[0]) {
	// hide overlay
	source.parentElement.parentElement.parentElement.style.display="none";
	
	// move
	target.parentNode.insertBefore(source, target);
	
	// adapt size
	document.getElementById("mwe_player_0").style.width="640px";
	document.getElementById("mwe_player_0").style.height="360px";
	player.parentElement.style.position="relative";
	document.getElementById("file").style.display="none";
	
	// unlock scroll
	document.body.style.overflow="scroll";
}

	}, 1000
); };
EstherLoer (talkcontribs)
.oo-ui-windowManager-modal > .oo-ui-dialog { background-color:unset;}
.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active { width:300px; height:200px; right:0; bottom:0; top:unset; left:unset; }
.oo-ui-windowManager-modal-active { overflow:unset; }

While this is not inside the layout yet, at least it does not obstruct scrolling anymore. 😃

Reply to "Audio files with TimedText open in pop-up overlay"