Sebschlicht2 has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/342623 )
Change subject: non-JS video thumb loading
......................................................................
non-JS video thumb loading
With this change the thumbnails of videos are no longer loaded via
JavaScript by accessing video player attributes. The corresponding
JS code has been removed.
Instead, like in the URL retrieval, the Wikimedia File-API is used
to generate a 300px thumbnail that is used as unit thumb.
Change-Id: I097b9f0ff31a9c4569821ed2520cd8762018da90
---
M includes/model/MoocItem.php
M includes/rendering/MoocLessonRenderer.php
M resources/js/ext.mooc.js
3 files changed, 64 insertions(+), 31 deletions(-)
diff --git a/includes/model/MoocItem.php b/includes/model/MoocItem.php
index fb3cb32..09fa62a 100644
--- a/includes/model/MoocItem.php
+++ b/includes/model/MoocItem.php
@@ -54,6 +54,15 @@
public $video;
/**
+ * @var array video data array containing
+ * <ul>
+ * <li>url: URL of the video</li>
+ * <li>thumbUrl: URL to the video thumbnail</li>
+ * </ul>
+ */
+ public $videoData;
+
+ /**
* @var MoocResource|null script associated with this item
*/
public $script;
diff --git a/includes/rendering/MoocLessonRenderer.php
b/includes/rendering/MoocLessonRenderer.php
index 32c13c5..200aa06 100644
--- a/includes/rendering/MoocLessonRenderer.php
+++ b/includes/rendering/MoocLessonRenderer.php
@@ -68,18 +68,24 @@
// left column: clickable video thumbnail
$this->out->addHTML( '<div class="left col-xs-12 col-sm-5">' );
+
+ // load video
+ // TODO make thumb width configurable? what is the max-width here?
possible to keep dynamic?
+ $hasVideo = $this->loadVideoData( $unit, 300 );
$videoThumbClasses = 'video-thumbnail';
- if ( !$unit->hasVideo() ) {
+ if ( !$hasVideo ) {
$videoThumbClasses .= ' no-video';
}
+
+ // add linked thumb or placeholder
$this->out->addHTML( "<a href='{$unit->title->getLinkURL()}'
class='$videoThumbClasses'>" );
- if ( $unit->hasVideo() ) {
- // TODO what is the max-width here? fine to use fixed width?
- $this->out->addWikiText(
"[[File:$unit->video|frameless|300x170px|link=$unit->title]]" );
+ if ( $hasVideo ) {
+ $this->out->addHTML( "<img src='{$unit->videoData['thumbUrl']}'
/>" );
} else {
$this->out->addHTML( "<span>{$this->loadMessage( 'unit-no-video'
)}</span>" );
}
$this->out->addHTML( '</a>' );
+
$this->out->addHTML( '</div>' );
// right column: links, clickable title, learning goals
@@ -114,6 +120,50 @@
}
/**
+ * Loads the video data of an item into the item.
+ *
+ * @param MoocItem $item item
+ * @param int $thumbWidth targeted thumbnail width
+ * @return {bool} whether the video data has been successfully loaded or
not
+ */
+ protected function loadVideoData( $item, $thumbWidth ) {
+ if ( $item->hasVideo() ) {
+ // TODO support more than File:?
+ $type = 'file';
+
+ switch ( $type ) {
+ case 'file':
+ // load file
+ $title = Title::newFromText( "File:$item->video" );
+ $file = wfFindFile( $title, [ 'time' => false ] );
+ if ( $file->exists() ) {
+ // load thumb
+ $thumbParams = [
+ 'width' => min( $thumbWidth, $file->getWidth( true
) )
+ ];
+ $thumb = $file->transform( $thumbParams );
+
+ // register link to the file
+ $this->parserOutput->addLink( $title );
+
+ $item->videoData = [
+ 'url' => $file->getUrl(),
+ 'thumbUrl' => $thumb->getUrl()
+ ];
+ return true;
+ }
+ // file does not exist
+ return false;
+ default:
+ // unknown video type
+ return false;
+ }
+ }
+ // no video
+ return false;
+ }
+
+ /**
* Adds the link bar to the child unit output.
*
* @param MoocUnit $unit child unit the link bar should be added for
@@ -142,19 +192,7 @@
global $wgMOOCImagePath;
$icon = $wgMOOCImagePath . 'ic_download.svg';
$title = $this->loadMessage( 'section-units-unit-link-download-video'
);
-
- // retrieve video file URL
- $href = null;
- if ( $unit->hasVideo() ) {
- $videoTitle = Title::newFromText( "File:$unit->video" );
- $file = wfFindFile( $videoTitle, [ 'time' => false ] );
- if ( $file->exists() ) {
- $href = $file->getUrl();
-
- // register link to the file
- $this->parserOutput->addLink( $videoTitle );
- }
- }
+ $href = ($unit->hasVideo() && $unit->videoData) ?
$unit->videoData['url'] : null;
$classes = ['download-video'];
if ( $href === null ) {
diff --git a/resources/js/ext.mooc.js b/resources/js/ext.mooc.js
index 4d7b2a2..a410a7b 100644
--- a/resources/js/ext.mooc.js
+++ b/resources/js/ext.mooc.js
@@ -34,20 +34,6 @@
mw.log.error( 'Failed to load MediaWiki modules to initialize MOOC
extension!' );
} );
- // make units and their video download buttons clickable
- $sections.find( '.child.unit' ).each( function ( index, ele ) {
- var $unit = $( ele );
- var $videoThumbnail = $unit.find( '.video-thumbnail' );
- if ( !$videoThumbnail.hasClass( 'no-video' ) ) {
- // make video a thumb
- var $unitVideo = $videoThumbnail.find( 'video' );
- var $unitVideoThumb = $( '<img>', {
- 'src': $unitVideo.attr( 'poster' )
- } );
- $unitVideo.replaceWith( $unitVideoThumb );
- }
- } );
-
// close modal box on key ESC down
$( document ).keydown( function ( e ) {
e = e || window.event;
--
To view, visit https://gerrit.wikimedia.org/r/342623
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I097b9f0ff31a9c4569821ed2520cd8762018da90
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MOOC
Gerrit-Branch: master
Gerrit-Owner: Sebschlicht2 <sebschli...@uni-koblenz.de>
Gerrit-Reviewer: Sebschlicht2 <sebschli...@uni-koblenz.de>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
