Improve subtitle positioning (#551)
Before this commit, we tweaked the subtitle position by modifying the VTT file, line by line with a regex because I did not know it was possible to use CSS for it. But apparently there are Shadow DOM elements that we can use instead. This new approach improves: - Wrapping long lines. Before, the text would go off the edge of the screen. Now it wraps intelligently. - The subtitles move up to get out of the way of the controls when those are visible.
This commit is contained in:
@@ -837,15 +837,22 @@ body.drag .app::after {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the cue text position so it appears above the player controls.
|
||||
*/
|
||||
video::-webkit-media-text-track-container {
|
||||
bottom: 60px;
|
||||
transition: bottom 0.1s ease-out;
|
||||
}
|
||||
.app.hide-video-controls video::-webkit-media-text-track-container {
|
||||
bottom: 30px;
|
||||
}
|
||||
::cue {
|
||||
background: none;
|
||||
color: #FFF;
|
||||
font: 24px;
|
||||
line-height: 1.3em;
|
||||
text-shadow: #000 -1px 0 1px, #000 1px 0 1px, #000 0 -1px 1px, #000 0 1px 1px, rgba(50, 50, 50, 0.5) 2px 2px 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* CHROMECAST / AIRPLAY CONTROLS
|
||||
*/
|
||||
|
||||
@@ -652,8 +652,8 @@ function addSubtitles (files, autoSelect) {
|
||||
}
|
||||
|
||||
function loadSubtitle (file, cb) {
|
||||
var srtToVtt = require('srt-to-vtt')
|
||||
var LanguageDetect = require('languagedetect')
|
||||
var srtToVtt = require('srt-to-vtt')
|
||||
|
||||
// Read the .SRT or .VTT file, parse it, add subtitle track
|
||||
var filePath = file.path || file
|
||||
@@ -669,12 +669,8 @@ function loadSubtitle (file, cb) {
|
||||
langDetected = langDetected.length ? langDetected[0][0] : 'subtitle'
|
||||
langDetected = langDetected.slice(0, 1).toUpperCase() + langDetected.slice(1)
|
||||
|
||||
// Set the cue text position so it appears above the player controls.
|
||||
// The only way to change cue text position is by modifying the VTT. It is not
|
||||
// possible via CSS.
|
||||
var subtitles = Buffer(buf.toString().replace(/(-->.*)/g, '$1 line:88%'))
|
||||
var track = {
|
||||
buffer: 'data:text/vtt;base64,' + subtitles.toString('base64'),
|
||||
buffer: 'data:text/vtt;base64,' + buf.toString('base64'),
|
||||
language: langDetected,
|
||||
label: langDetected,
|
||||
filePath: filePath
|
||||
|
||||
Reference in New Issue
Block a user