From 014017604d01b64a15210ca678bd0984c1df8324 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 21 May 2016 16:49:30 -0700
Subject: [PATCH] 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.
---
 renderer/index.css | 13 ++++++++++---
 renderer/index.js  |  8 ++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/renderer/index.css b/renderer/index.css
index 83875fa3..f6a727ae 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -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
  */
diff --git a/renderer/index.js b/renderer/index.js
index 9f0bf2bc..19bead1c 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -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