[BUGFIX] Usability improvements for Media Element
authorSteffen Ritter <info@rs-websystems.de>
Thu, 12 Apr 2012 19:05:05 +0000 (21:05 +0200)
committerOliver Hader <oliver.hader@typo3.org>
Thu, 19 Apr 2012 19:00:36 +0000 (21:00 +0200)
Final adaptions to the  Media Element to reduce the UI to the
neccessary stuff and better distinguish between HTML5 and normal
rendering.

Change-Id: I247796e5260e03664b2b02d6c212a19455440b57
Fixes: #35921
Releases: 4.7,6.0
Reviewed-on: http://review.typo3.org/10364
Reviewed-by: Georg Ringer
Reviewed-by: Oliver Hader
Tested-by: Oliver Hader
typo3/sysext/cms/flexform_media.xml
typo3/sysext/cms/locallang_ttc.xlf
typo3/sysext/cms/tslib/content/class.tslib_content_media.php
typo3/sysext/css_styled_content/static/setup.txt

index 7884849..1bea643 100644 (file)
                                                        </config>
                                                </TCEforms>
                                        </mmType>
+                                       <mmUseHTML5>
+                                               <TCEforms>
+                                                       <label>LLL:EXT:cms/locallang_ttc.xml:media.useHTML5</label>
+                                                       <displayCond>FIELD:mmType:!=:audio</displayCond>
+                                                       <onChange>reload</onChange>
+                                                       <config>
+                                                               <type>check</type>
+                                                               <default>0</default>
+                                                       </config>
+                                               </TCEforms>
+                                       </mmUseHTML5>
                                        <mmWidth>
                                                <TCEforms>
                                                        <label>LLL:EXT:cms/locallang_ttc.xml:media.width</label>
                                        <mmRenderType>
                                                <TCEforms>
                                                        <label>LLL:EXT:cms/locallang_ttc.xml:media.renderType</label>
+                                                       <displayCond>FIELD:mmType:!=:audio</displayCond>
                                                        <config>
                                                                <type>select</type>
                                                                <items>
                                                                        <numIndex index="0">
-                                                                               <numIndex index="0">LLL:EXT:cms/locallang_ttc.xml:media.renderType.preferHtml5OverFlash</numIndex>
+                                                                               <numIndex index="0">LLL:EXT:cms/locallang_ttc.xml:media.renderType.auto</numIndex>
                                                                                <numIndex index="1">auto</numIndex>
                                                                        </numIndex>
                                                                        <numIndex index="1">
-                                                                               <numIndex index="0">LLL:EXT:cms/locallang_ttc.xml:media.renderType.preferFlashOverHtml5</numIndex>
-                                                                               <numIndex index="1">preferFlashOverHtml5</numIndex>
-                                                                       </numIndex>
-                                                                       <numIndex index="2">
                                                                                <numIndex index="0">LLL:EXT:cms/locallang_ttc.xml:media.renderType.qt</numIndex>
                                                                                <numIndex index="1">qt</numIndex>
                                                                        </numIndex>
-                                                                       <numIndex index="3">
+                                                                       <numIndex index="2">
                                                                                <numIndex index="0">LLL:EXT:cms/locallang_ttc.xml:media.renderType.embed</numIndex>
                                                                                <numIndex index="1">embed</numIndex>
                                                                        </numIndex>
                        <ROOT>
                                <TCEforms>
                                        <sheetTitle>LLL:EXT:cms/locallang_ttc.xml:media.tabVideo</sheetTitle>
-                                       <displayCond>FIELD:sGeneral.mmType:=:video</displayCond>
+                                       <displayCond>FIELD:sGeneral.mmType:!=:audio</displayCond>
                                </TCEforms>
                                <type>array</type>
                                <el>
                                                        </config>
                                                </TCEforms>
                                        </mmFile>
+                               </el>
+                       </ROOT>
+               </sVideo>
+               <sVideoAccessible>
+                       <ROOT>
+                               <TCEforms>
+                                       <sheetTitle>LLL:EXT:cms/locallang_ttc.xml:media.tabVideoAccessible</sheetTitle>
+                                       <displayCond>FIELD:sGeneral.mmUseHTML5:=:1</displayCond>
+                               </TCEforms>
+                               <type>array</type>
+                               <el>
                                        <mmSources>
                                                <title>LLL:EXT:cms/locallang_ttc.xml:media.sources</title>
                                                <type>array</type>
                                                                                                                <script>browse_links.php?mode=wizard&amp;act=file|url</script>
                                                                                                                <params type="array">
                                                                                                                        <blindLinkOptions>page,folder,mail,spec</blindLinkOptions>
-                                                                                                                       <allowedExtensions>asf,avi,class,dcr,flv,mov,mpg,mp4,m4a,m4v,ogg,ogv,swf,webm</allowedExtensions>
+                                                                                                                       <allowedExtensions>mov,mpg,mp4,m4a,m4v,ogg,ogv,swf,webm</allowedExtensions>
                                                                                                                </params>
                                                                                                                <JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
                                                                                                        </link>
                                                        </config>
                                                </TCEforms>
                                        </mmCaption>
-
-                               </el>
-                       </ROOT>
-               </sVideo>
-               <sAudio>
-                       <ROOT>
-                               <TCEforms>
-                                       <sheetTitle>LLL:EXT:cms/locallang_ttc.xml:media.tabAudio</sheetTitle>
-                                       <displayCond>FIELD:sGeneral.mmType:=:audio</displayCond>
-                               </TCEforms>
-                               <type>array</type>
-                               <el>
                                        <mmAudioSources>
-                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.audioSources</title>
+                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.audioDescription</title>
                                                <type>array</type>
                                                <section>1</section>
                                                <el>
                                                        <mmAudioSourcesContainer>
                                                                <type>array</type>
-                                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.media.url</title>
+                                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.media.browseUrl</title>
                                                                <el>
                                                                        <mmAudioSource>
                                                                                <TCEforms>
-                                                                                       <label>LLL:EXT:cms/locallang_ttc.xml:media.url</label>
+                                                                                       <label>LLL:EXT:cms/locallang_ttc.xml:media.browseUrl</label>
                                                                                        <config>
                                                                                                <type>input</type>
                                                                                                <size>60</size>
                                                        </mmAudioSourcesContainer>
                                                </el>
                                        </mmAudioSources>
+
+                               </el>
+                       </ROOT>
+               </sVideoAccessible>
+               <sAudio>
+                       <ROOT>
+                               <TCEforms>
+                                       <sheetTitle>LLL:EXT:cms/locallang_ttc.xml:media.tabAudio</sheetTitle>
+                                       <displayCond>FIELD:sGeneral.mmType:=:audio</displayCond>
+                               </TCEforms>
+                               <type>array</type>
+                               <el>
                                        <mmAudioFallback>
                                                <TCEforms>
                                                        <label>LLL:EXT:cms/locallang_ttc.xml:media.audioFallbackUrl</label>
                                                        </config>
                                                </TCEforms>
                                        </mmAudioFallback>
-
+                                       <mmAudioSources>
+                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.audioSources</title>
+                                               <type>array</type>
+                                               <section>1</section>
+                                               <el>
+                                                       <mmAudioSourcesContainer>
+                                                               <type>array</type>
+                                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.media.url</title>
+                                                               <el>
+                                                                       <mmAudioSource>
+                                                                               <TCEforms>
+                                                                                       <label>LLL:EXT:cms/locallang_ttc.xml:media.url</label>
+                                                                                       <config>
+                                                                                               <type>input</type>
+                                                                                               <size>60</size>
+                                                                                               <eval>trim,required</eval>
+                                                                                               <default></default>
+                                                                                               <wizards type="array">
+                                                                                                       <_PADDING>2</_PADDING>
+                                                                                                       <link type="array">
+                                                                                                               <type>popup</type>
+                                                                                                               <title>LLL:EXT:cms/locallang_ttc.xml:media.browseUrlTitle</title>
+                                                                                                               <icon>link_popup.gif</icon>
+                                                                                                               <script>browse_links.php?mode=wizard&amp;act=file|url</script>
+                                                                                                               <params type="array">
+                                                                                                                       <blindLinkOptions>page,folder,mail,spec</blindLinkOptions>
+                                                                                                                       <allowedExtensions>au,asf,mp3,m4a,oga,ogg, wav,webm,wmv</allowedExtensions>
+                                                                                                               </params>
+                                                                                                               <JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
+                                                                                                       </link>
+                                                                                               </wizards>
+                                                                                       </config>
+                                                                               </TCEforms>
+                                                                       </mmAudioSource>
+                                                               </el>
+                                                       </mmAudioSourcesContainer>
+                                               </el>
+                                       </mmAudioSources>
                                </el>
                        </ROOT>
                </sAudio>
index 8195bbb..a272dee 100644 (file)
                        <trans-unit id="media.tabVideo" xml:space="preserve">
                                <source>Video Element</source>
                        </trans-unit>
+                       <trans-unit id="media.tabVideoAccessible" xml:space="preserve">
+                               <source>HTML5 Additions</source>
+                       </trans-unit>
                        <trans-unit id="media.url" xml:space="preserve">
                                <source>Path or URL</source>
                        </trans-unit>
                        <trans-unit id="media.audioSources" xml:space="preserve">
                                <source>Audio sources for HTML5 &lt;audio&gt; element</source>
                        </trans-unit>
+                       <trans-unit id="media.audioDescription" xml:space="preserve">
+                               <source>audio description for videos</source>
+                       </trans-unit>
                        <trans-unit id="media.audioFallbackUrl" xml:space="preserve">
                                <source>Path or URL to fallback audio source (Flash or QuickTime)</source>
                        </trans-unit>
                        <trans-unit id="media.type" xml:space="preserve">
                                <source>Media Type</source>
                        </trans-unit>
+                       <trans-unit id="media.useHTML5" xml:space="preserve">
+                               <source>HTML5 / accessible rendering</source>
+                       </trans-unit>
                        <trans-unit id="media.type.video" xml:space="preserve">
                                <source>Video</source>
                        </trans-unit>
index 1361018..582f5e8 100644 (file)
@@ -46,6 +46,7 @@ class tslib_content_Media extends tslib_content_Abstract {
                $flexParams = isset($conf['flexParams.'])
                        ? $this->cObj->stdWrap($conf['flexParams'], $conf['flexParams.'])
                        : $conf['flexParams'];
+
                if (substr($flexParams, 0, 1) === '<') {
                                // It is a content element rather a TS object
                        $flexParams = t3lib_div::xml2array($flexParams, 'T3');
@@ -53,6 +54,7 @@ class tslib_content_Media extends tslib_content_Abstract {
                                $this->cObj->readFlexformIntoConf($sheetData['lDEF'], $conf['parameter.'], TRUE);
                        }
                }
+
                        // Type is video or audio
                $conf['type'] = $this->doFlexFormOverlay($conf, 'type');
 
@@ -100,11 +102,6 @@ class tslib_content_Media extends tslib_content_Abstract {
                        unset($conf['audioFallback']);
                }
 
-                       // Backward compatibility
-               if ($conf['type'] === 'audio' && !isset($conf['audioFallback'])) {
-                       $conf['audioFallback'] = $conf['file'];
-               }
-
                        // Caption file
                $caption = $this->doFlexFormOverlay($conf, 'caption');
                if ($caption) {
@@ -115,8 +112,8 @@ class tslib_content_Media extends tslib_content_Abstract {
                        // Establish render type
                $renderType = $this->doFlexFormOverlay($conf, 'renderType');
 
+               $conf['preferFlashOverHtml5'] = 0;
                if ($renderType === 'preferFlashOverHtml5') {
-                       $conf['preferFlashOverHtml5'] = 1;
                        $renderType = 'auto';
                }
 
@@ -133,7 +130,6 @@ class tslib_content_Media extends tslib_content_Abstract {
                                $renderType = strtolower($conf['fileExtHandler.'][$fileinfo['fileext']]);
                        }
                }
-
                $mime = $renderType . 'object';
                $typeConf = $conf['mimeConf.'][$mime . '.'][$conf['type'] . '.'] ? $conf['mimeConf.'][$mime . '.'][$conf['type'] . '.'] : array();
                $conf['predefined'] = array();
@@ -185,7 +181,15 @@ class tslib_content_Media extends tslib_content_Abstract {
                        }
                }
 
-               if ($renderType !== 'qt' && $renderType !== 'embed') {
+               if ($renderType === 'swf' && $this->doFlexFormOverlay($conf, 'useHTML5')) {
+                       $renderType = 'flowplayer';
+               }
+
+               if ($conf['type'] === 'audio' && !isset($conf['audioSources'])) {
+                       $renderType = 'swf';
+               }
+
+               if ($renderType !== 'qt' && $renderType !== 'embed' && $conf['type'] == 'video') {
                        if (isset($conf['file']) && (
                                        strpos($conf['file'], '.swf') !== FALSE ||
                                        (strpos($conf['file'], '://') !== FALSE) && strpos(t3lib_div::getUrl($conf['file'], 2), 'application/x-shockwave-flash') !== FALSE)
index 23afb54..e4a5e5e 100644 (file)
@@ -1496,11 +1496,11 @@ tt_content.media {
                        asf = MEDIA
                        class = MEDIA
                        wmv = MEDIA
-                       mp3 = FLOWPLAYER
-                       mp4 = FLOWPLAYER
-                       m4v = FLOWPLAYER
-                       swa = FLOWPLAYER
-                       flv = FLOWPLAYER
+                       mp3 = SWF
+                       mp4 = SWF
+                       m4v = SWF
+                       swa = SWF
+                       flv = SWF
                        swf = SWF
                        mov = QT
                        m4v = QT