jenkins-bot has submitted this change and it was merged.

Change subject: User-friendly prompt to install WebM components for Internet 
Explorer
......................................................................


User-friendly prompt to install WebM components for Internet Explorer

Instead of giving a raw-file download prompt, link directly to Google's IE WebM
plugin download page with some brief instructions. After installing, reload the
page and *poof* the video works.

Notes:
* Components are not available for Windows RT (Windows on ARM), so the download 
is
  not offered in this case.
* Components only work with IE 9 and above, but since the player framework 
doesn't
  seem to work on IE 8 and below anyway we don't bother to check versions here.
* These really are WebM only, and do not include support for Ogg audio files.
* In future, ogv.js should cover the audio case and low-resolution video case 
without
  the plugin prompt, but we'll still need WebM for HD video playback.

Bug: T75348
Change-Id: I2ad8257d8752871b67632dc7b7b42d2825f8fc68
---
M MwEmbedModules/EmbedPlayer/EmbedPlayer.php
M MwEmbedModules/EmbedPlayer/i18n/en.json
M MwEmbedModules/EmbedPlayer/i18n/qqq.json
A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css
A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js
M MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
M MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
7 files changed, 100 insertions(+), 4 deletions(-)

Approvals:
  Gilles: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php 
b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
index c60d41c..811db67 100644
--- a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
+++ b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
@@ -68,6 +68,10 @@
                                'scripts'=> "resources/mw.EmbedPlayerVLCApp.js",
                                'dependencies' => array( 'mediawiki.Uri' )
                        ),
+                       "mw.EmbedPlayerIEWebMPrompt" => array(
+                               'scripts' => 
'resources/mw.EmbedPlayerIEWebMPrompt.js',
+                               'styles' => 
'resources/mw.EmbedPlayerIEWebMPrompt.css',
+                       ),
                        "mw.EmbedPlayerImageOverlay" => array( 'scripts'=> 
"resources/mw.EmbedPlayerImageOverlay.js" ),
 
                        "mw.EmbedPlayerVlc" => array( 'scripts'=> 
"resources/mw.EmbedPlayerVlc.js" ),
diff --git a/MwEmbedModules/EmbedPlayer/i18n/en.json 
b/MwEmbedModules/EmbedPlayer/i18n/en.json
index 15b0061..2db508a 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/en.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/en.json
@@ -52,6 +52,7 @@
     "mwe-embedplayer-ogg-player-webmNative": "HTML5 WebM player",
     "mwe-embedplayer-ogg-player-oggPlugin": "Generic Ogg plugin",
     "mwe-embedplayer-ogg-player-vlcAppPlayer": "VLC for iOS app",
+    "mwe-embedplayer-ogg-player-IEWebMPrompt": "IE WebM plugin downloader",
     "mwe-embedplayer-ogg-player-quicktime-mozilla": "QuickTime plugin",
     "mwe-embedplayer-ogg-player-quicktime-activex": "QuickTime ActiveX",
     "mwe-embedplayer-ogg-player-cortado": "Java Cortado",
@@ -86,5 +87,8 @@
     "mwe-embedplayer-vlcapp-downloadapp": "Download the VLC app from the App 
Store",
     "mwe-embedplayer-vlcapp-openvideo": "Open this video in the VLC app",
     "mwe-embedplayer-vlcapp-downloadvideo": "Download this video",
-    "mwe-embedplayer-vlcapp-vlcapppopup": "To play videos on this site, you 
need the free VLC app. Install now?"
+    "mwe-embedplayer-vlcapp-vlcapppopup": "To play videos on this site, you 
need the free VLC app. Install now?",
+    "mwe-embedplayer-iewebmprompt-intro": "Oops! One more thing before you can 
play this video...",
+    "mwe-embedplayer-iewebmprompt-linktext": "Install WebM media components 
for Microsoft Internet Explorer",
+    "mwe-embedplayer-iewebmprompt-outro": "Reload this page after installing."
 }
diff --git a/MwEmbedModules/EmbedPlayer/i18n/qqq.json 
b/MwEmbedModules/EmbedPlayer/i18n/qqq.json
index dd90245..3156fc8 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/qqq.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/qqq.json
@@ -28,6 +28,7 @@
        "mwe-embedplayer-ogg-player-aacNative": "name of AAC player in 
configuration screen",
        "mwe-embedplayer-ogg-player-cortado": "{{optional}}",
        "mwe-embedplayer-ogg-player-selected": "{{Identical|Selected}}",
+       "mwe-embedplayer-ogg-player-IEWebMPrompt": "name of IE WebM plugin 
installer helper in configuration screen",
        "mwe-embedplayer-for_best_experience": "Shown when user's browser 
doesn't support playing videos. Parameters:\n* $1 - An empty <a> tag. 
Don't use this parameter.",
        "mwe-embedplayer-download-warn": "Parameters:\n* $1 - URL",
        "mwe-embedplayer-do_not_warn_again": "Standard message for 
disabling\nfuture identical warnings messages",
@@ -39,5 +40,8 @@
        "mwe-embedplayer-vlcapp-downloadapp": "First bullet point after the 
mwe-embedplayer-vlcapp-intro. Links to the download page for installing the vlc 
app ( https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8 ).",
        "mwe-embedplayer-vlcapp-openvideo": "Second bullet point after the 
mwe-embedplayer-vlcapp-intro. Link will open the video in the VLC app, if the 
app is installed",
        "mwe-embedplayer-vlcapp-downloadvideo": "Third bullet point after the 
mwe-embedplayer-vlcapp-intro. Linked directly to the video file",
-       "mwe-embedplayer-vlcapp-vlcapppopup": "Popup dialog box shown to user 
if they do not have the VLC app installed when trying to play a video on 
iPhone/iPad. Box will be presented with this message and two buttons (OK and 
cancel. Actual text of buttons may vary.) If user presses ok, they are 
redirected to https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8.";
+       "mwe-embedplayer-vlcapp-vlcapppopup": "Popup dialog box shown to user 
if they do not have the VLC app installed when trying to play a video on 
iPhone/iPad. Box will be presented with this message and two buttons (OK and 
cancel. Actual text of buttons may vary.) If user presses ok, they are 
redirected to https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8.";,
+       "mwe-embedplayer-iewebmprompt-intro": "Shown where a video would be on 
the page, on IE with no WebM or Ogg support. Followed by 
mwe-embedplayer-iewebmprompt-linktext",
+       "mwe-embedplayer-iewebmprompt-linktext": "Shown where a video would be 
on the page, on IE with no WebM or Ogg support. When clicked links to 
https://tools.google.com/dlpage/webmmf/";,
+       "mwe-embedplayer-iewebmprompt-outro": "Shown where a video would be on 
the page, on IE with no WebM or Ogg support. Follows 
mwe-embedplayer-iewebmprompt-linktext"
 }
diff --git 
a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css 
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css
new file mode 100644
index 0000000..9cf7b49
--- /dev/null
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css
@@ -0,0 +1,18 @@
+.mwEmbedPlayer .iewebm-prompt {
+       position: absolute;
+       top: 100px;
+       bottom: 60px;
+       left: 20px;
+       right: 20px;
+       border-radius: 20px;
+       background-color: rgba(255, 255, 255, 0.75);
+
+       width: auto !important;
+       height: auto !important;
+
+       padding: 20px;
+}
+
+.mwEmbedPlayer .iewebm-prompt div {
+       color: black;
+}
\ No newline at end of file
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js 
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js
new file mode 100644
index 0000000..de8bf89
--- /dev/null
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js
@@ -0,0 +1,46 @@
+/**
+ * Show a prompt to install WebM plugin for IE 9+
+ */
+
+( function( mw, $ ) { "use strict";
+
+mw.EmbedPlayerIEWebMPrompt = {
+       // List of supported features (or lack thereof)
+        supports: {
+               'playHead':false, /* The seek slider */
+               'pause':true, /* Play pause button in control bar */
+               'stop':true, /* Does this actually do anything?? */
+               'fullscreen':false,
+               'timeDisplay':false,
+               'volumeControl':false
+       },
+
+       // Instance name:
+       instanceOf:'IEWebMPrompt',
+
+       /*
+       * Embed this "fake" player
+       *
+       * @return {String}
+       *       embed code to link to WebM plugin download
+       */
+       embedPlayerHTML: function() {
+               var pluginUrl = 'https://tools.google.com/dlpage/webmmf/',
+                       $link;
+
+               // Overlay the video placeholder with download plugin link.
+               $link = $( '<a></a>' )
+                       .attr( 'href', pluginUrl )
+                       .attr( 'target', '_blank' )
+                       .text( mw.msg( 'mwe-embedplayer-iewebmprompt-linktext' 
) );
+               $( this ).append( $( '<div class="iewebm-prompt"></div>' )
+                       .width( this.getWidth() )
+                       .height( this.getHeight() )
+                       .append( $( '<div></div>' ).text( mw.msg( 
'mwe-embedplayer-iewebmprompt-intro' ) ) )
+                       .append( $link )
+                       .append( $( '<div></div>' ).text( mw.msg( 
'mwe-embedplayer-iewebmprompt-outro' ) ) )
+               );
+       }
+};
+
+} )( window.mediaWiki, window.jQuery );
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js 
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
index 6665080..4915b55 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
@@ -91,6 +91,12 @@
        'video/webm; codecs="vp8, vorbis"',
 ], 'VLCApp' );
 
+var IEWebMPrompt = new mw.MediaPlayer( 'IEWebMPrompt', [
+       'video/webm',
+       'video/webm; codecs="vp8"',
+       'video/webm; codecs="vp8, vorbis"'
+], 'IEWebMPrompt' );
+
 // Generic plugin
 //var oggPluginPlayer = new mw.MediaPlayer( 'oggPlugin', ['video/ogg', 
'application/ogg'], 'Generic' );
 
@@ -316,6 +322,20 @@
                if ( mw.isIOS() ) {
                        this.mediaPlayers.addPlayer( vlcAppPlayer );
                }
+
+               // Note IE 11 doesn't identify itself as 'MSIE'.
+               // For simplicity just check for the rendering engine codename 
'Trident'.
+               if ( navigator.userAgent.indexOf( 'Trident' ) != -1 ) {
+                       if ( this.mediaPlayers.isSupportedPlayer( 'webmNative' 
) ) {
+                               // IE has the WebM components already, leave it 
be!
+                       } else if ( navigator.userAgent.indexOf( 'ARM' ) != -1 
) {
+                               // Windows RT doesn't allow installation of the 
WebM components.
+                               // Don't tease the poor user.
+                       } else {
+                               // Prompt user to install the WebM media 
components for IE 9+
+                               this.mediaPlayers.addPlayer( IEWebMPrompt );
+                       }
+               }
                // Allow extensions to detect and add their own "players"
                
mw.log("EmbedPlayer::trigger:embedPlayerUpdateMediaPlayersEvent");
                $( mw ).trigger( 'embedPlayerUpdateMediaPlayersEvent' , 
this.mediaPlayers );
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js 
b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
index 2080056..6cdf315 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
@@ -34,8 +34,8 @@
                this.defaultPlayers['application/vnd.apple.mpegurl'] = 
['Native'];
 
                this.defaultPlayers['video/ogg'] = ['Native', 'Vlc', 'Java', 
'Generic', 'VLCApp'];
-               this.defaultPlayers['audio/webm'] = ['Native', 'Vlc', 'VLCApp'];
-               this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp'];
+               this.defaultPlayers['audio/webm'] = ['Native', 'Vlc', 'VLCApp', 
'IEWebMPrompt'];
+               this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp', 
'IEWebMPrompt'];
                this.defaultPlayers['application/ogg'] = ['Native', 'Vlc', 
'Java', 'Generic', 'VLCApp'];
                this.defaultPlayers['audio/ogg'] = ['Native', 'Vlc', 'Java', 
'VLCApp'];
                this.defaultPlayers['audio/mpeg']= ['Native', 'Kplayer'];

-- 
To view, visit https://gerrit.wikimedia.org/r/172948
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I2ad8257d8752871b67632dc7b7b42d2825f8fc68
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/TimedMediaHandler
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <br...@wikimedia.org>
Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org>
Gerrit-Reviewer: Gilles <gdu...@wikimedia.org>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to