Sebschlicht2 has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/342622 )
Change subject: non-JS video URL retrieval
......................................................................
non-JS video URL retrieval
URLs of video source files are now retrieved using wfFindFile in
the extension PHP core instead of error-pronely navigating the DOM
tree of an injected video player.
The JS code that extracted the URL prior to this change has been
removed.
Several small UI bugs have been fixed alongside.
Change-Id: I07fa114a6b1a2569c29b84ccf8451e575885bd1e
---
M MOOC.php
M includes/rendering/MoocContentRenderer.php
M includes/rendering/MoocLessonRenderer.php
M includes/rendering/MoocOverviewRenderer.php
M resources/js/ext.mooc.js
M resources/less/ext.mooc.less
6 files changed, 94 insertions(+), 117 deletions(-)
diff --git a/MOOC.php b/MOOC.php
index 92edd07..940f603 100644
--- a/MOOC.php
+++ b/MOOC.php
@@ -15,7 +15,8 @@
$wgResourceLoaderDebug = true;
// TODO get out how to include jquery.ui.effects (includes easing) other
than shipping
-
+ // TODO can we automatically prefix classes/ids? at least in LESS?
+
$wgMOOCSectionConfig = [
'learning-goals' => [
'collapsed' => false
diff --git a/includes/rendering/MoocContentRenderer.php
b/includes/rendering/MoocContentRenderer.php
index 8033b93..bc8b4c6 100644
--- a/includes/rendering/MoocContentRenderer.php
+++ b/includes/rendering/MoocContentRenderer.php
@@ -235,23 +235,27 @@
* Adds an info box emphasising users to contribute to a currently empty
section to the output.
*
* @param string $sectionKey key of the empty section
+ * @param bool $showActionAddContent whether to show controls to add
content
* @param string $editHref edit link
*/
- protected function addEmptySectionBox( $sectionKey, $editHref = null ) {
- // TODO can we automatically prefix classes/ids? at least in LESS?
- $this->out->addHTML('<div class="section-empty-box">');
+ protected function addEmptySectionBox( $sectionKey, $showActionAddContent
= true, $editHref = null ) {
+ $this->out->addHTML( '<div class="section-empty-box">' );
- $this->out->addHTML('<span class="description">');
- $this->out->addHTML( $this->loadMessage( 'section-' . $sectionKey .
'-empty-description' ) );
- $this->out->addHTML('</span> ');
+ // inform about missing content
+ $this->out->addHTML( "<span class='description'>{$this->loadMessage(
"section-$sectionKey-empty-description" )}</span>" );
- $editHrefAttr = ( $editHref === null ) ? '' : 'href="' . $editHref .
'"';
- $this->out->addHTML( '<a class="edit-link"' . $editHrefAttr . '>' );
- $this->out->addHTML($this->loadMessage('section-' . $sectionKey .
'-empty-edit-link'));
- $this->out->addHTML('</a>');
- // TODO do we need an additional text to point at external resources
such as /script or general hints?
-
- $this->out->addHTML('</div>');
+ // add controls to add content
+ if ( $showActionAddContent ) {
+ // build edit link
+ $editHrefAttr = ( $editHref === null ) ? '' : " href='$editHref'";
+
+ // TODO do we need an additional text to point at external
resources such as /script or general hints?
+ $this->out->addHTML( " <a class='edit-link'$editHrefAttr>" );
+ $this->out->addHTML( $this->loadMessage(
"section-$sectionKey-empty-edit-link" ) );
+ $this->out->addHTML( '</a>' );
+ }
+
+ $this->out->addHTML( '</div>' );
}
/**
diff --git a/includes/rendering/MoocLessonRenderer.php
b/includes/rendering/MoocLessonRenderer.php
index 13f0555..32c13c5 100644
--- a/includes/rendering/MoocLessonRenderer.php
+++ b/includes/rendering/MoocLessonRenderer.php
@@ -40,7 +40,13 @@
$this->endSection();
}
- protected function addUnitsSectionContent( $lesson ) {
+ /**
+ * Adds the content of the units section.
+ *
+ * @param MoocLesson $lesson lesson which units to list
+ * @param bool $showActionAddUnit whether to show controls to add units if
none have been added yet
+ */
+ protected function addUnitsSectionContent( $lesson, $showActionAddUnit =
true ) {
if ( $lesson->hasChildren() ) {
// list child units if any
foreach ( $lesson->children as $unit ) {
@@ -48,7 +54,7 @@
}
} else {
// show info box if no child units added yet
- $this->addEmptySectionBox( self::SECTION_KEY_UNITS );
+ $this->addEmptySectionBox( self::SECTION_KEY_UNITS,
$showActionAddUnit );
}
}
@@ -93,7 +99,7 @@
if ( $learningGoals !== null ) {
$this->out->addWikiText( $learningGoals );
} else {
- $this->out->addHTML( $this->loadMessage( 'section-' .
'learning-goals' . '-empty-description' ) );
+ $this->out->addHTML( $this->loadMessage(
'section-learning-goals-empty-description' ) );
}
$this->out->addHTML( '</div>' );
@@ -112,19 +118,19 @@
*
* @param MoocUnit $unit child unit the link bar should be added for
*/
- protected function addChildLinkBar($unit) {
- $this->out->addHTML('<div class="links">');
+ protected function addChildLinkBar( $unit ) {
+ $this->out->addHTML( '<div class="links">' );
// video
- $this->addChildLinkBarSectionLink($unit, self::SECTION_KEY_VIDEO);
+ $this->addChildLinkBarSectionLink( $unit, self::SECTION_KEY_VIDEO );
// download video
- $this->addChildLinkBarDownloadLink($unit);
+ $this->addChildLinkBarDownloadLink( $unit );
// script
- $this->addChildLinkBarSectionLink($unit, self::SECTION_KEY_SCRIPT);
+ $this->addChildLinkBarSectionLink( $unit, self::SECTION_KEY_SCRIPT );
// quiz
- $this->addChildLinkBarSectionLink($unit, self::SECTION_KEY_QUIZ);
+ $this->addChildLinkBarSectionLink( $unit, self::SECTION_KEY_QUIZ );
- $this->out->addHTML('</div>');
+ $this->out->addHTML( '</div>' );
}
/**
@@ -132,16 +138,29 @@
*
* @param MoocUnit $unit unit the download link is added for
*/
- protected function addChildLinkBarDownloadLink($unit) {
+ protected function addChildLinkBarDownloadLink( $unit ) {
global $wgMOOCImagePath;
$icon = $wgMOOCImagePath . 'ic_download.svg';
- $title = $this->loadMessage("section-units-unit-link-download-video");
- $href = isset($unit->video) ?
$this->resolveMediaUrl(Title::newFromText("Media:{$unit->video}")) : null;
- $classes = [ 'download-video' ];
+ $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 );
+ }
+ }
+
+ $classes = ['download-video'];
if ( $href === null ) {
array_push( $classes, 'disabled' );
}
- $this->addChildLinkBarLink($icon, $href, $title, $classes);
+ $this->addChildLinkBarLink( $icon, $href, $title, $classes );
}
/**
@@ -150,7 +169,7 @@
* @param Title $title page title of the media file
* @return string full URL to the original media file
*/
- protected function resolveMediaUrl($title) {
+ protected function resolveMediaUrl( $title ) {
// TODO resolve media file title to full URL to original file
return $title->getLinkURL();
}
@@ -161,12 +180,12 @@
* @param MoocUnit $unit child unit
* @param string $sectionKey section key
*/
- protected function addChildLinkBarSectionLink($unit, $sectionKey) {
+ protected function addChildLinkBarSectionLink( $unit, $sectionKey ) {
global $wgMOOCImagePath;
- $icon = $wgMOOCImagePath . $this->getSectionIconFilename($sectionKey);
+ $icon = $wgMOOCImagePath . $this->getSectionIconFilename( $sectionKey
);
$href = "{$unit->title->getLinkURL()}#$sectionKey";
- $title = $this->loadMessage("section-units-unit-link-$sectionKey");
- $this->addChildLinkBarLink($icon, $href, $title);
+ $title = $this->loadMessage( "section-units-unit-link-$sectionKey" );
+ $this->addChildLinkBarLink( $icon, $href, $title );
}
protected function addChildLinkBarLink( $icon, $href, $title, $classes =
null ) {
@@ -187,14 +206,14 @@
}
}
- protected function addModalBoxActions($sectionKey, $action) {
- if ($sectionKey == self::SECTION_KEY_UNITS && $action ==
self::ACTION_ADD) {
- $titleAdd = $this->loadMessage('modal-button-title-add');
- $this->out->addHTML("<input type=\"submit\" class=\"btn btn-add
btn-submit\" value=\"$titleAdd\" />");
- $titleCancel = $this->loadMessage('modal-button-title-cancel');
- $this->out->addHTML("<input type=\"button\" class=\"btn
btn-cancel\" value=\"$titleCancel\" />");
+ protected function addModalBoxActions( $sectionKey, $action ) {
+ if ( $sectionKey == self::SECTION_KEY_UNITS && $action ==
self::ACTION_ADD ) {
+ $titleAdd = $this->loadMessage( 'modal-button-title-add' );
+ $this->out->addHTML( "<input type='submit' class='btn btn-add
btn-submit' value='$titleAdd' />" );
+ $titleCancel = $this->loadMessage( 'modal-button-title-cancel' );
+ $this->out->addHTML( "<input type='button' class='btn btn-cancel'
value='$titleCancel' />" );
} else {
- parent::addModalBoxActions($sectionKey, $action);
+ parent::addModalBoxActions( $sectionKey, $action );
}
}
@@ -203,40 +222,40 @@
*
* @param string $sectionKey section key
*/
- protected function addSectionActionAdd($sectionKey) {
+ protected function addSectionActionAdd( $sectionKey ) {
// TODO link to add unit function instead
- $btnHref = '/SpecialPage:MoocEdit?title=' . $this->item->title .
'§ion=' . $sectionKey;
- $btnTitle = $this->loadMessage("section-$sectionKey-add-title");
+ $btnHref =
"/SpecialPage:MoocEdit?title={$this->item->title}§ion=$sectionKey";
+ $btnTitle = $this->loadMessage( "section-$sectionKey-add-title" );
- $this->addSectionActionButton('add', $btnTitle, $btnHref);
- $this->addModalBox($sectionKey, 'add');
+ $this->addSectionActionButton( self::ACTION_ADD, $btnTitle, $btnHref );
+ $this->addModalBox( $sectionKey, self::ACTION_ADD );
}
- protected function addSectionActions($sectionKey) {
- if ($sectionKey == self::SECTION_KEY_UNITS) {
+ protected function addSectionActions( $sectionKey ) {
+ if ( $sectionKey == self::SECTION_KEY_UNITS ) {
// add unit
- $this->addSectionActionAdd($sectionKey);
+ $this->addSectionActionAdd( $sectionKey );
} else {
- // TODO always add edit button
- parent::addSectionActions($sectionKey);
+ // TODO always add edit button?
+ parent::addSectionActions( $sectionKey );
}
}
- protected function getSectionActionIconFilename($action) {
- if ($action == 'add') {
+ protected function getSectionActionIconFilename( $action ) {
+ if ( $action == self::ACTION_ADD ) {
return "ic_$action.png";
} else {
return "ic_$action.svg";
}
}
- protected function getSectionIconFilename($sectionKey) {
- switch ($sectionKey) {
+ protected function getSectionIconFilename( $sectionKey ) {
+ switch ( $sectionKey ) {
case self::SECTION_KEY_UNITS:
- return parent::getSectionIconFilename('children');
+ return parent::getSectionIconFilename( 'children' );
default:
- return parent::getSectionIconFilename($sectionKey);
+ return parent::getSectionIconFilename( $sectionKey );
}
}
}
diff --git a/includes/rendering/MoocOverviewRenderer.php
b/includes/rendering/MoocOverviewRenderer.php
index d58aa81..39d5fda 100644
--- a/includes/rendering/MoocOverviewRenderer.php
+++ b/includes/rendering/MoocOverviewRenderer.php
@@ -40,7 +40,6 @@
// show info box if no child lessons added yet
$this->addEmptySectionBox( self::SECTION_KEY_LESSONS );
}
- // TODO add controls to add lessons somewhere
$this->endSection();
}
@@ -60,7 +59,7 @@
$this->out->addHTML( '</div>' );
// units
- $this->addUnitsSectionContent( $lesson );
+ $this->addUnitsSectionContent( $lesson, false );
$this->out->addHTML( '</div>' );
}
diff --git a/resources/js/ext.mooc.js b/resources/js/ext.mooc.js
index e0e9ee5..4d7b2a2 100644
--- a/resources/js/ext.mooc.js
+++ b/resources/js/ext.mooc.js
@@ -38,68 +38,15 @@
$sections.find( '.child.unit' ).each( function ( index, ele ) {
var $unit = $( ele );
var $videoThumbnail = $unit.find( '.video-thumbnail' );
- $videoThumbnail.on( 'click', browseToClickedUnit );
-
- var $unitVideoDownloadLink = $unit.find( '.links .download-video' );
- if ( !$unitVideoDownloadLink.hasClass( 'disabled' ) ) {
- // extract link of source video
- var $unitVideo = $videoThumbnail.find( 'video' );
- var sourceVideoLink = extractSourceVideoLink( $unitVideo );
- if ( sourceVideoLink !== null ) {
- // inject video link
- $unitVideoDownloadLink.attr( 'href', sourceVideoLink );
- }
-
+ if ( !$videoThumbnail.hasClass( 'no-video' ) ) {
// make video a thumb
+ var $unitVideo = $videoThumbnail.find( 'video' );
var $unitVideoThumb = $( '<img>', {
'src': $unitVideo.attr( 'poster' )
} );
$unitVideo.replaceWith( $unitVideoThumb );
}
} );
-
- /**
- * Extracts the source video link via its 'src' attribute.
- *
- * @param $video video object
- * @returns {*} link to the source video or null
- */
- function extractSourceVideoLink( $video ) {
- var sourceVideoLink = null;
- $video.children( 'source' ).each( function ( index, ele ) {
- var $source = $( ele );
- if ( $source.attr( 'data-shorttitle' ).endsWith( 'source' ) ) {
- sourceVideoLink = $source.attr( 'src' );
- }
- } );
- return sourceVideoLink;
- }
-
- /**
- * Browses to a unit that contains the element that has been clicked.
- */
- function browseToClickedUnit() {
- var $unit = $( this ).parents( '.unit' );
- var unitUrl = getUnitLinkHref( $unit );
- if ( unitUrl !== null ) {
- window.location.href = unitUrl;
- }
- }
-
- /**
- * Extracts the URL of a unit via its title.
- *
- * @param $unit unit
- * @returns {string} URL of the unit or null on error
- */
- function getUnitLinkHref( $unit ) {
- var $unitLink = $unit.find( '.title a' );
- if ( $unitLink.length === 1 ) {
- return $unitLink.attr( 'href' );
- }
- mw.log.warn( 'Failed to retrieve the URL of the unit specified!' );
- return null;
- }
// close modal box on key ESC down
$( document ).keydown( function ( e ) {
diff --git a/resources/less/ext.mooc.less b/resources/less/ext.mooc.less
index 02e54a5..0dc5392 100644
--- a/resources/less/ext.mooc.less
+++ b/resources/less/ext.mooc.less
@@ -36,11 +36,13 @@
position: relative;
padding: 0;
border: 1px solid @cSectionBorder;
+ border-top: none;
overflow: hidden;
.header {
padding: 5px 20px;
color: @cSectionHeader;
+ border-top: 1px solid @cSectionBorder;
border-bottom: 1px solid @cSectionBorder;
.gradient(@cSectionHeaderBgAlternative, @cSectionHeaderBgTop,
@cSectionHeaderBgBottom);
.box-shadow(0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255,
255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1));
@@ -50,6 +52,7 @@
.actions {
float: right;
.btn {
+ padding: 3px 6px;
opacity: 1;
.transition(.3s, ease-out 0s, opacity);
}
@@ -88,6 +91,9 @@
}
}
}
+ .header.fixed {
+ border-top: none;
+ }
.content {
position: relative;
margin: 0;
@@ -121,6 +127,7 @@
opacity: 1;
.transition(.3s, ease-out);
}
+ // modal box wrapper
.modal-wrapper {
display: none;
position: fixed;
@@ -153,9 +160,6 @@
}
}
}
- .section:first-child {
- border-top: none;
- }
// TODO non-JS users can not see the full content by doing this
.section.default-collapsed {
.content {
@@ -181,6 +185,7 @@
#mooc-navigation {
#mooc-sections .section;
+ border-top: 1px solid @cSectionBorder;
.header {
position: relative;
@@ -188,6 +193,7 @@
width: 100%;
cursor: default;
z-index: 1;
+ border-top: none;
}
.fixed.header {
position: fixed;
@@ -211,6 +217,7 @@
}
#mooc-navigation.fixed {
position: fixed;
+ border-top: none;
}
#mooc-navigation.trailing {
position: fixed;
--
To view, visit https://gerrit.wikimedia.org/r/342622
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I07fa114a6b1a2569c29b84ccf8451e575885bd1e
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MOOC
Gerrit-Branch: master
Gerrit-Owner: Sebschlicht2 <sebschli...@uni-koblenz.de>
Gerrit-Reviewer: Sebschlicht <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
