Added support for VTT subtitles and subtitles toggling both in local and browser media players

platypush/backend/http/__init__.py

@@ -11,7 +11,7 @@ import time
 
 from multiprocessing import Process
 from flask import Flask, Response, abort, jsonify, request as http_request, \
-    render_template, send_from_directory, make_response
+    render_template, send_from_directory
 
 from redis import Redis
 
@@ -379,8 +379,20 @@ class HttpBackend(Backend):
                 if media_id in media_map:
                     return media_map[media_id]
 
+                subfile = None
+
+                if subtitles:
+                    try:
+                        subfile = get_plugin('media.subtitles').download(
+                            link=subtitles, convert_to_vtt=True
+                        ).output.get('filename')
+                    except Exception as e:
+                        self.logger.warning('Unable to load subtitle {}: {}'
+                                            .format(subtitles, str(e)))
+
                 media_hndl = MediaHandler.build(source, url=media_url,
-                                                subtitles=subtitles)
+                                                subtitles=subfile)
+
                 media_map[media_id] = media_hndl
                 media_hndl.media_id = media_id
 
@@ -456,8 +468,9 @@ class HttpBackend(Backend):
                                        media_url=media_hndl.url.replace(
                                            self.remote_base_url, ''),
                                        media_type=media_hndl.mime_type,
-                                       subtitles_url='/media/subtitles/{}.srt'.
+                                       subtitles_url='/media/subtitles/{}.vtt'.
-                                       format(media_id))
+                                       format(media_id) if media_hndl.subtitles
+                                       else None)
             else:
                 return Response(media_hndl.get_data(
                     from_bytes=from_bytes, to_bytes=to_bytes,
@@ -508,12 +521,13 @@ class HttpBackend(Backend):
 
                 subfile = get_plugin('media.subtitles').download(
                     link=subtitles[0].get('SubDownloadLink'),
-                    media_resource=media_hndl.path).get('filename')
+                    media_resource=media_hndl.path,
+                    convert_to_vtt=True).get('filename')
 
             media_hndl.set_subtitles(subfile)
             return {
                 'filename': subfile,
-                'url': self.remote_base_url + '/media/subtitles/' + media_id + '.srt',
+                'url': self.remote_base_url + '/media/subtitles/' + media_id + '.vtt',
             }
 
         def remove_subtitles(media_id):
@@ -530,7 +544,7 @@ class HttpBackend(Backend):
             return {}
 
 
-        @app.route('/media/subtitles/<media_id>.srt', methods=['GET', 'PUT', 'DELETE'])
+        @app.route('/media/subtitles/<media_id>.vtt', methods=['GET', 'POST', 'DELETE'])
         def handle_subtitles(media_id):
             """
             This route can be used to download and/or expose subtitle files
@@ -590,7 +604,7 @@ class HttpBackend(Backend):
                 ret = dict(media_hndl)
                 if media_hndl.subtitles:
                     ret['subtitles_url'] = self.remote_base_url + \
-                        '/media/subtitles/' + media_hndl.media_id + '.srt'
+                        '/media/subtitles/' + media_hndl.media_id + '.vtt'
                 return jsonify(ret)
             except FileNotFoundError as e:
                 abort(404, str(e))
@@ -754,6 +768,7 @@ class HttpBackend(Backend):
         self.logger.info('Initialized HTTP backend on port {}'.format(self.port))
 
         self.app = self.webserver()
+        self.app.debug = False
         self.server_proc = Process(target=self.app.run,
                                    name='WebServer',
                                    kwargs=kwargs)

platypush/backend/http/media/handlers/__init__.py

@@ -53,7 +53,8 @@ class MediaHandler:
 
     def __iter__(self):
         for attr in ['name', 'source', 'mime_type', 'url', 'subtitles',
-                     'prefix_handlers']:
+                     'prefix_handlers', 'media_id']:
+            if hasattr(self, attr):
                 yield (attr, getattr(self, attr))
 
 

platypush/backend/http/static/js/media.js

@@ -18,7 +18,9 @@ $(document).ready(function() {
         $mediaSubtitlesMessage = $mediaSubtitlesModal.find('.media-subtitles-message'),
         $mediaSearchSubtitles = $ctrlForm.find('[data-modal="#media-subtitles-modal"]'),
         prevVolume = undefined,
-        selectedResource = undefined;
+        selectedResource = undefined,
+        browserVideoWindow = undefined,
+        browserVideoElement = undefined;
 
     const onEvent = (event) => {
         switch (event.args.type) {
@@ -158,7 +160,7 @@ $(document).ready(function() {
 
                         resolve(uri, subtitles);
                     } else {
-                        reject(Error(xhr.responseText));
+                        reject(xhr.responseText);
                     }
                 },
             });
@@ -192,13 +194,14 @@ $(document).ready(function() {
         });
     };
 
-    const downloadSubtitles = function(link, mediaResource) {
+    const downloadSubtitles = function(link, mediaResource, vtt=false) {
         return new Promise((resolve, reject) => {
             run({
                 action: 'media.subtitles.download',
                 args: {
                     'link': link,
                     'media_resource': mediaResource,
+                    'convert_to_vtt': vtt,
                 }
             }).then((response) => {
                 resolve(response.response.output.filename);
@@ -244,10 +247,17 @@ $(document).ready(function() {
     const playInBrowser = (resource, subtitles) => {
         return new Promise((resolve, reject) => {
             startStreaming(resource, subtitles).then((url, subtitles) => {
-                window.open(url + '?webplayer', '_blank');
+                browserVideoWindow = window.open(
+                    url + '?webplayer', '_blank');
+
+                browserVideoWindow.addEventListener('load', () => {
+                    browserVideoElement = browserVideoWindow.document
+                        .querySelector('#video-player');
+                });
+
                 resolve(url, subtitles);
-            }).catch((xhr, status, error) => {
+            }).catch((error) => {
-                reject(xhr.responseText);
+                reject(error);
             });
         });
     };
@@ -287,8 +297,8 @@ $(document).ready(function() {
             playHndl.then((response) => {
                 resolve(resource);
             }).catch((error) => {
-                showError('Playback error: ' + error.message);
+                showError('Playback error: ' + (error ? error : 'undefined'));
-                reject(error.message);
+                reject(error);
             });
         });
     };
@@ -302,44 +312,36 @@ $(document).ready(function() {
                 resolve(resource);
             };
 
+            var defaultPlay = () => { _play(resource).finally(onVideoReady); };
             $mediaSearchSubtitles.data('resource', resource);
             onVideoLoading();
 
             var subtitlesConf = window.config.media.subtitles;
 
             if (subtitlesConf) {
-                populateSubtitlesModal(resource);
+                populateSubtitlesModal(resource).then((subs) => {
-
                     if ('language' in subtitlesConf) {
-                    tryFetchSubtitles(resource).then((subtitles) => {
+                        if (subs) {
-                        if (!subtitles) {
+                            downloadSubtitles(subs[0].SubDownloadLink, resource).then((subtitles) => {
-                            showError('Cannot get subtitles');
-                            _play(resource).finally(onVideoReady);
-                        } else {
                                 _play(resource, subtitles).finally(onVideoReady);
-                        }
+                                resolve(resource, subtitles);
+                            }).catch((error) => {
+                                defaultPlay();
+                                resolve(resource);
                             });
+                        } else {
+                            defaultPlay();
+                            resolve(resource);
                         }
                     } else {
-                _play(resource).finally(onVideoReady);
+                        defaultPlay();
+                        resolve(resource);
                     }
                 });
-    };
+            } else {
-
+                defaultPlay();
-    const tryFetchSubtitles = (resource) => {
+                resolve(resource);
-        return new Promise((resolve, reject) => {
-            getSubtitles(resource).then((subs) => {
-                if (!subs) {
-                    resolve();
-                    return;  // No subtitles found
             }
-
-                downloadSubtitles(subs[0].SubDownloadLink, resource).then((filename) => {
-                    resolve(filename);
-                }).catch((error) => {
-                    resolve();
-                });
-            });
         });
     };
 
@@ -361,8 +363,8 @@ $(document).ready(function() {
                     window.open(url, '_blank');
                     resolve(url);
                 })
-                .catch((xhr, status, error) => {
+                .catch((error) => {
-                    reject(xhr.responseText);
+                    reject(error);
                 })
                 .finally(() => {
                     onVideoReady();
@@ -371,15 +373,16 @@ $(document).ready(function() {
     };
 
     const populateSubtitlesModal = (resource) => {
+        return new Promise((resolve, reject) => {
             $mediaSubtitlesMessage.text('Loading subtitles...');
             $mediaSubtitlesResults.text('');
             $mediaSubtitlesMessage.show();
             $mediaSubtitlesResultsContainer.hide();
 
             getSubtitles(resource).then((subs) => {
-            if (!subs.length) {
+                if (!subs) {
                     $mediaSubtitlesMessage.text('No subtitles found');
-                return;
+                    resolve();
                 }
 
                 $mediaSearchSubtitles.show();
@@ -417,8 +420,67 @@ $(document).ready(function() {
 
                 $mediaSubtitlesMessage.hide();
                 $mediaSubtitlesResultsContainer.show();
+                resolve(subs);
             }).catch((error) => {
                 $mediaSubtitlesMessage.text('Unable to load subtitles: ' + error.message);
+                reject(error);
+            });
+        });
+    };
+
+    const setBrowserPlayerSubs = (resource, subtitles) => {
+        var mediaId;
+        if (!browserVideoElement) {
+            showError('No video is currently playing in the browser');
+            return;
+        }
+
+        return new Promise((resolve, reject) => {
+            $.get('/media').then((media) => {
+                for (var m of media) {
+                    if (m.source === resource) {
+                        mediaId = m.media_id;
+                        break;
+                    }
+                }
+
+                if (!mediaId) {
+                    reject(resource + ' is not a registered media');
+                    return;
+                }
+
+                return $.ajax({
+                    type: 'POST',
+                    url: '/media/subtitles/' + mediaId + '.vtt',
+                    contentType: 'application/json',
+                    data: JSON.stringify({
+                        'filename': subtitles,
+                    }),
+                });
+            }).then(() => {
+                resolve(resource, subtitles);
+            }).catch((error) => {
+                reject('Cannot set subtitles for ' + resource + ': ' + error);
+            });
+        });
+    };
+
+    const setLocalPlayerSubs = (resource, subtitles) => {
+        return new Promise((resolve, reject) => {
+            run({
+                action: 'media.remove_subtitles'
+            }).then((response) => {
+                return run({
+                    action: 'media.set_subtitles',
+                    args: {
+                        'filename': subtitles,
+                    }
+                })
+            }).then((response) => {
+                resolve(response);
+            }).catch((error) => {
+                reject(error);
+            });
         });
     };
 
@@ -435,6 +497,7 @@ $(document).ready(function() {
             };
 
             $input.prop('disabled', true);
+            $mediaItemPanel.find('[data-action]').removeClass('disabled');
             $videoResults.text('Searching...');
 
             if (resource.match(new RegExp('^https?://')) ||
@@ -594,8 +657,29 @@ $(document).ready(function() {
                 });
         });
 
-        // $mediaSearchSubtitles.on('mouseup touchend', () => {
+        $mediaSubtitlesModal.on('mouseup touchend', '.media-subtitle-container', (event) => {
-        // });
+            var resource = $(event.currentTarget).data('resource');
+            var link = $(event.currentTarget).data('downloadLink');
+            var selectedDevice = getSelectedDevice();
+
+            if (selectedDevice.isRemote) {
+                showError('Changing subtitles at runtime on Chromecast is not yet supported');
+                return;
+            }
+
+            var convertToVTT = selectedDevice.isBrowser;
+
+            downloadSubtitles(link, resource, convertToVTT).then((subtitles) => {
+                if (selectedDevice.isBrowser) {
+                    return setBrowserPlayerSubs(resource, subtitles);
+                } else {
+                    return setLocalPlayerSubs(resource, subtitles);
+                }
+            }).catch((error) => {
+                console.warning('Could not load subtitles ' + link +
+                    ' to the player: ' + (error || 'undefined error'))
+            });
+        });
     };
 
     const initRemoteDevices = function() {
@@ -607,8 +691,7 @@ $(document).ready(function() {
                 action: 'media.chromecast.get_chromecasts',
             },
 
-            function(results) {
+            onSuccess = function(results) {
-                $devsRefreshBtn.removeClass('disabled');
                 $devsList.find('.cast-device[data-remote]').remove();
 
                 if (!results || results.response.errors.length) {
@@ -641,6 +724,10 @@ $(document).ready(function() {
                     $nameContainer.appendTo($cast);
                     $cast.appendTo($devsList);
                 }
+            },
+
+            onComplete = function() {
+                $devsRefreshBtn.removeClass('disabled');
             }
         );
     };

platypush/backend/http/templates/webplayer.html

@@ -1,16 +1,18 @@
 <script>
     window.addEventListener('load', () => {
-        var video = document.querySelector('#video');
+        var video = document.querySelector('#video-player');
-        video.addEventListener('load', () => {
+        video.addEventListener('loadedmetadata', () => {
+            video.play();
+        });
+
         var tracks = video.textTracks;
         if (tracks.length) {
             tracks[0].mode = 'showing';
         }
-        });
     }, false);
 </script>
 
-<video id="video" controls autoplay preload="metadata">
+<video id="video-player" controls autoplay preload="metadata" width="100%" height="100%">
     <source src="{{ media_url }}" type="{{ media_type }}">
     {% if subtitles_url %}
     <track label="Subtitles" kind="subtitles" src="{{ subtitles_url }}" default>

platypush/message/request/__init__.py

@@ -208,11 +208,11 @@ class Request(Message):
 
                 if response and response.is_error():
                     logger.warning(('Response processed with errors from ' +
-                                    'action {}.{}: {}').format(
+                                    'action {}: {}').format(
-                                        plugin, self.action, str(response)))
+                                        self.action, str(response)))
                 else:
-                    logger.info('Processed response from action {}.{}: {}'.
+                    logger.info('Processed response from action {}: {}'.
-                                format(plugin, self.action, str(response)))
+                                format(self.action, str(response)))
             except Exception as e:
                 # Retry mechanism
                 plugin.logger.exception(e)

platypush/plugins/media/__init__.py

@@ -217,6 +217,10 @@ class MediaPlugin(Plugin):
     def set_subtitles(self, filename, *args, **kwargs):
         raise self._NOT_IMPLEMENTED_ERR
 
+    @action
+    def remove_subtitles(self, *args, **kwargs):
+        raise self._NOT_IMPLEMENTED_ERR
+
     @action
     def is_playing(self, *args, **kwargs):
         raise self._NOT_IMPLEMENTED_ERR

platypush/plugins/media/mplayer.py

@@ -353,6 +353,14 @@ class MediaMplayerPlugin(MediaPlugin):
         self._exec('sub_visibility', 1)
         return self._exec('sub_load', filename)
 
+    @action
+    def remove_subtitles(self, index=None):
+        """ Removes the subtitle specified by the index (default: all) """
+        if index is None:
+            return self._exec('sub_remove')
+        else:
+            return self._exec('sub_remove', index)
+
     @action
     def is_playing(self):
         """

platypush/plugins/media/subtitles.py

@@ -2,6 +2,7 @@ import gzip
 import os
 import requests
 import tempfile
+import threading
 
 from platypush.message.response import Response
 from platypush.plugins import Plugin, action
@@ -15,6 +16,7 @@ class MediaSubtitlesPlugin(Plugin):
     Requires:
 
         * **python-opensubtitles** (``pip install -e 'git+https://github.com/agonzalezro/python-opensubtitles#egg=python-opensubtitles'``)
+        * **webvtt** (``pip install webvtt-py``), optional, to convert srt subtitles into vtt format ready for web streaming
         * **requests** (``pip install requests``)
     """
 
@@ -39,6 +41,7 @@ class MediaSubtitlesPlugin(Plugin):
         self._ost = OpenSubtitles()
         self._token = self._ost.login(username, password)
         self.languages = []
+        self._file_lock = threading.RLock()
 
         if language:
             if isinstance(language, str):
@@ -116,7 +119,7 @@ class MediaSubtitlesPlugin(Plugin):
 
 
     @action
-    def download(self, link, media_resource=None, path=None):
+    def download(self, link, media_resource=None, path=None, convert_to_vtt=False):
         """
         Downloads a subtitle link (.srt/.vtt file or gzip/zip OpenSubtitles
         archive link) to the specified directory
@@ -132,6 +135,10 @@ class MediaSubtitlesPlugin(Plugin):
             media local file then the subtitles will be saved in the same folder
         :type media_resource: str
 
+        :param convert_to_vtt: If set to True, then the downloaded subtitles
+            will be converted to VTT format (default: no conversion)
+        :type convert_to_vtt: bool
+
         :returns: dict. Format::
 
             {
@@ -142,6 +149,8 @@ class MediaSubtitlesPlugin(Plugin):
         if link.startswith('file://'):
             link = link[len('file://'):]
         if os.path.isfile(link):
+            if convert_to_vtt:
+                link = self.to_vtt(link).output
             return { 'filename': link }
 
         gzip_content = requests.get(link).content
@@ -166,11 +175,33 @@ class MediaSubtitlesPlugin(Plugin):
         try:
             with f:
                 f.write(gzip.decompress(gzip_content))
+            if convert_to_vtt:
+                path = self.to_vtt(path).output
         except Exception as e:
             os.unlink(path)
             raise e
 
         return { 'filename': path }
 
+    @action
+    def to_vtt(self, filename):
+        """
+        Get the VTT content given an SRT file. Will return the original content if
+        the file is already in VTT format.
+        """
+
+        if filename.lower().endswith('.vtt'):
+            return filename
+
+        import webvtt
+
+        with self._file_lock:
+            try:
+                webvtt.read(filename)
+                return filename
+            except Exception as e:
+                webvtt.from_srt(filename).save()
+                return '.'.join(filename.split('.')[:-1]) + '.vtt'
+
 
 # vim:sw=4:ts=4:et:

requirements.txt

@@ -126,4 +126,5 @@ inputs
 
 # Support for media subtitles
 # git+https://github.com/agonzalezro/python-opensubtitles#egg=python-opensubtitles
+# webvtt-py
 

setup.py

@@ -95,9 +95,10 @@ setup(
         'Support for Plex plugin': ['plexapi'],
         'Support for Chromecast plugin': ['pychromecast'],
         'Support for sound devices': ['sounddevice', 'soundfile', 'numpy'],
+        'Support for web media subtitles': ['webvtt-py']
         # 'Support for Leap Motion backend': ['git+ssh://git@github.com:BlackLight/leap-sdk-python3.git'],
         # 'Support for Flic buttons': ['git+https://@github.com/50ButtonsEach/fliclib-linux-hci.git']
-        # 'Support for media subtitles: ['git+https://github.com/agonzalezro/python-opensubtitles#egg=python-opensubtitles']
+        # 'Support for media subtitles': ['git+https://github.com/agonzalezro/python-opensubtitles#egg=python-opensubtitles']
     },
 )