Partial fix to style the Embedded media player - SL #3933 #4465

The only way to do this in webkitgtk1 is to inject CSS using
WebKit.WebView.execute_script:

http://webkitgtk.org/reference/webkitgtk/stable/webkitgtk-webkitwebview.html#webkit-web-view-execute-script

The new CSS rules do:

- set page background white
- set player background dark grey, same as Sugar toolbar
- set player text white
- set buttons size to the same size as Sugar toolbar buttons

This commit doesn't change the size of the icons inside the buttons,
which is too small.  Ongoing investigation in the #4465 ticket, it
looks like it should be an upstream fix.

Signed-off-by: Manuel Quiñones <manuq@laptop.org>

2 files changed, 46 insertions, 0 deletions

diff --git a/browser.py b/browser.py
index b786b6b..397b4fd 100644
--- a/browser.py
+++ b/browser.py
@@ -567,6 +567,8 @@ class Browser(WebKit.WebView):
                      self.__mime_type_policy_cb)
         self.connect('load-error', self.__load_error_cb)
 
+        self._inject_media_style = False
+
         ContentInvoker(self)
 
         try:
@@ -700,6 +702,9 @@ class Browser(WebKit.WebView):
             policy_decision.ignore()
             return True
 
+        elif mimetype == 'audio/x-vorbis+ogg':
+            self._inject_media_style = True
+
         elif not self.can_show_mime_type(mimetype):
             policy_decision.download()
             return True
@@ -720,6 +725,15 @@ class Browser(WebKit.WebView):
         if web_error.code in (WebKit.PolicyError.\
                 FRAME_LOAD_INTERRUPTED_BY_POLICY_CHANGE,
                 WebKit.PluginError.WILL_HANDLE_LOAD):
+            if self._inject_media_style:
+                css_style_file = open(os.path.join(activity.get_bundle_path(),
+                                                   "data/media-controls.css"))
+                css_style = css_style_file.read().replace('\n', '')
+                inject_style_script = \
+                    "var style = document.createElement('style');" \
+                    "style.innerHTML = '%s';" \
+                    "document.body.appendChild(style);" % css_style
+                web_view.execute_script(inject_style_script)
             return True
 
         data = {
diff --git a/data/media-controls.css b/data/media-controls.css
new file mode 100644
index 0000000..9e21f08
--- /dev/null
+++ b/data/media-controls.css
@@ -0,0 +1,32 @@
+body {
+  background-color: #ffffff;
+}
+audio, video {
+  width: 500px;
+  height: 55px;
+  color: #ffffff;
+}
+audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
+  height: 55px;
+}
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
+  height: 55px;
+  background-color: #282828;
+  border-radius: 25px;
+}
+audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button,
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button,
+audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button,
+audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button,
+audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button,
+audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
+  width: 55px;
+  height: 55px;
+}
+audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
+  height: 55px;
+  line-height: 0px;
+  font-size: 23px;
+  text-align: center;
+}