From 112166c05f3c64857fb0c1e0df4cbbbaf248fe26 Mon Sep 17 00:00:00 2001
From: Manuel Quiñones <manuq@laptop.org>
Date: Thu, 11 Apr 2013 19:58:16 +0000
Subject: 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>
---
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;
+}
--
cgit v0.9.1