Actualización

main/inc/lib/javascript/readout_text/css/start.css

@@ -0,0 +1,37 @@
+body {
+    font-size: 25px;
+    line-height: 1.25em !important;
+    text-align: justify;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.text-highlight {
+    -webkit-transition: color .3s linear, text-shadow .3s linear;
+    -khtml-transition: color .3s linear, text-shadow .3s linear;
+    -moz-transition: color .3s linear, text-shadow .3s linear;
+    -ms-transition: color .3s linear, text-shadow .3s linear;
+    transition: color .3s linear, text-shadow .3s linear;
+}
+
+.text-highlight.active {
+    color: red;
+    -webkit-text-shadow: 0px 0px 1px rgba(255, 0, 0, 1);
+    -khtml-text-shadow: 0px 0px 1px rgba(255, 0, 0, 1);
+    -moz-text-shadow: 0px 0px 1px rgba(255, 0, 0, 1);
+    -ms-text-shadow: 0px 0px 1px rgba(255, 0, 0, 1);
+    text-shadow: 0px 0px 1px rgba(255, 0, 0, 1);
+    -webkit-transition: color .3s linear, text-shadow .3s linear;
+    -khtml-transition: color .3s linear, text-shadow .3s linear;
+    -moz-transition: color .3s linear, text-shadow .3s linear;
+    -ms-transition: color .3s linear, text-shadow .3s linear;
+    transition: color .3s linear, text-shadow .3s linear;
+}
+
+br {
+    margin-bottom: 1em;
+}

main/inc/lib/javascript/readout_text/js/start.js

@@ -0,0 +1,76 @@
+/* For licensing terms, see /license.txt */
+
+$(function () {
+    var parent$ = window.parent.$,
+        playerSelector = '#' + parent$('mediaelementwrapper').attr('id') + '_html5',
+        $player = parent$(playerSelector);
+
+    var player = $player.get(0),
+        def = $.Deferred();
+
+    if (!$player.length) {
+        processText(wordsCount);
+
+        return;
+    }
+
+    player.preload = 'auto';
+
+    function processText(turns) {
+        var tagEnd = '</span> ',
+            tagStart = tagEnd + '<span class="text-highlight">',
+            wordsPerSecond = Math.ceil(wordsCount / turns);
+
+        var indexes = Object.keys(words);
+
+        var output = '';
+
+        for (var i = 0; i < turns; i++) {
+            var block = indexes.slice(i * wordsPerSecond, i * wordsPerSecond + wordsPerSecond),
+                index = block[0];
+
+            if (!index) {
+                continue;
+            }
+
+            output += tagStart + words[index];
+
+            for (var j = 1; j < block.length; j++) {
+                index = block[j];
+                output += ' ' + words[index];
+            }
+        }
+
+        output += tagEnd;
+        output = output.slice(tagEnd.length);
+
+        $('.page-blank').html(output);
+
+        def.resolve(output);
+
+        return def.promise();
+    }
+
+    player.ontimeupdate = function () {
+        var block = Math.ceil(this.currentTime);
+
+        $('.text-highlight')
+            .removeClass('active')
+            .filter(function (index) {
+                return index + 1 == block;
+            })
+            .addClass('active');
+    };
+    player.onloadedmetadata = function () {
+        var turns = Math.ceil(this.duration);
+
+        processText(turns)
+            .then(function (output) {
+                var to = window.setTimeout(function () {
+                    player.play();
+
+                    window.clearTimeout(to);
+                }, 1500);
+            });
+    }
+});