diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/MashupPlayer.js
--- a/src/widgets/MashupPlayer.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/MashupPlayer.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,19 +1,23 @@
-IriSP.Widgets.MashupPlayer = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
- this.is_mashup = true;
-};
-
-IriSP.Widgets.MashupPlayer.prototype = new IriSP.Widgets.Widget();
+import _ from "lodash";
+import jQuery from "jquery";
+import mashupPlayerStyles from "./MashupPlayer.module.css";
-IriSP.Widgets.MashupPlayer.prototype.defaults = {
- aspect_ratio: 14/9,
- split_screen: false,
- player_type: "PopcornPlayer",
- background: "#000000"
-};
+const MashupPlayer = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ this.is_mashup = true;
+ }
-IriSP.Widgets.MashupPlayer.prototype.draw = function() {
- var _this = this,
+ static defaults = {
+ aspect_ratio: 14 / 9,
+ split_screen: false,
+ player_type: "PopcornPlayer",
+ background: "#000000",
+ };
+
+ draw() {
+ var _this = this,
_mashup = this.media,
_currentMedia = null,
_currentAnnotation = null,
@@ -24,233 +28,240 @@
_seekdiv,
_timedelta,
medialist = _mashup.getMedias();
-
- _mashup.paused = (!this.autostart && !this.autoplay);
-
- function changeCurrentAnnotation() {
+
+ _mashup.paused = !this.autostart && !this.autoplay;
+
+ function changeCurrentAnnotation() {
if (_timecode >= _mashup.duration) {
- if (!_mashup.paused) {
- _mashup.paused = true;
- _mashup.trigger("pause");
- }
- _timecode = 0;
+ if (!_mashup.paused) {
+ _mashup.paused = true;
+ _mashup.trigger("pause");
+ }
+ _timecode = 0;
}
- var _annotation = _mashup.getAnnotationAtTime( _timecode );
+ var _annotation = _mashup.getAnnotationAtTime(_timecode);
if (typeof _annotation === "undefined") {
- if (_currentMedia) {
- _currentMedia.pause();
- if (!_mashup.paused) {
- _mashup.paused = true;
- _mashup.trigger("pause");
- }
+ if (_currentMedia) {
+ _currentMedia.pause();
+ if (!_mashup.paused) {
+ _mashup.paused = true;
+ _mashup.trigger("pause");
}
- return;
+ }
+ return;
}
if (_annotation !== _currentAnnotation) {
- _currentAnnotation = _annotation;
- _segmentBegin = _currentAnnotation.annotation.begin.milliseconds;
- _segmentEnd = _currentAnnotation.annotation.end.milliseconds;
- _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds;
- _currentMedia = _currentAnnotation.getMedia();
-
- for (var _i = 0; _i < medialist.length; _i++) {
- if (medialist[_i].id !== _currentMedia.id) {
- if (!_this.split_screen) {
- medialist[_i].hide();
- }
- medialist[_i].pause();
- } else {
- medialist[_i].show();
- }
+ _currentAnnotation = _annotation;
+ _segmentBegin = _currentAnnotation.annotation.begin.milliseconds;
+ _segmentEnd = _currentAnnotation.annotation.end.milliseconds;
+ _timedelta = _segmentBegin - _currentAnnotation.begin.milliseconds;
+ _currentMedia = _currentAnnotation.getMedia();
+
+ for (var _i = 0; _i < medialist.length; _i++) {
+ if (medialist[_i].id !== _currentMedia.id) {
+ if (!_this.split_screen) {
+ medialist[_i].hide();
+ }
+ medialist[_i].pause();
+ } else {
+ medialist[_i].show();
}
-
- /* PRELOADING */
- var _preloadedMedias = [],
- _toPreload = _mashup.getAnnotations().filter(function(_a) {
- return (_a.begin >= _currentAnnotation.end && _a.getMedia() !== _currentMedia);
+ }
+
+ /* PRELOADING */
+ var _preloadedMedias = [],
+ _toPreload = _mashup.getAnnotations().filter(function (_a) {
+ return (
+ _a.begin >= _currentAnnotation.end &&
+ _a.getMedia() !== _currentMedia
+ );
});
- IriSP._(_toPreload).each(function(_a) {
- var _media = _a.getMedia();
- if (IriSP._(_preloadedMedias).indexOf(_media.id) === -1) {
- _preloadedMedias.push(_media.id);
- _media.setCurrentTime(_a.annotation.begin.getSeconds());
- _media.seeking = true;
-/*
+ _(_toPreload).each(function (_a) {
+ var _media = _a.getMedia();
+ if (_(_preloadedMedias).indexOf(_media.id) === -1) {
+ _preloadedMedias.push(_media.id);
+ _media.setCurrentTime(_a.annotation.begin.getSeconds());
+ _media.seeking = true;
+ /*
console.log("Preloading ", _media.id, " at t=", _a.annotation.begin.getSeconds());
*/
- }
- });
-
- // console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta)
- // } else {
- // console.log("changeCurrentAnnotation called, but segment hasn't changed");
+ }
+ });
+
+ // console.log("Changed segment: media="+ this.currentMedia.id + ", from=" + this.segmentBegin + " to=" + this.segmentEnd +", timedelta = ", this.timedelta)
+ // } else {
+ // console.log("changeCurrentAnnotation called, but segment hasn't changed");
}
-
- _currentMedia.setCurrentTime( _timecode + _timedelta);
+
+ _currentMedia.setCurrentTime(_timecode + _timedelta);
_currentMedia.seeking = true;
-
+
if (!_mashup.paused) {
- _currentMedia.play();
- _seeking = true;
- _seekdiv.show();
+ _currentMedia.play();
+ _seeking = true;
+ _seekdiv.show();
}
-/*
+ /*
console.log("Setting time of media", _currentMedia.id, "to", _timecode + _timedelta)
*/
- _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode));
+ _mashup.trigger("timeupdate", new ns.Model.Time(_timecode));
+ }
- }
-
- if (!this.height) {
- this.height = Math.floor(this.width/this.aspect_ratio);
+ if (!this.height) {
+ this.height = Math.floor(this.width / this.aspect_ratio);
this.$.css({
- height: this.height
+ height: this.height,
});
- }
-
- this.$.css({
- background: this.background
- });
-
- var _grid = Math.ceil(Math.sqrt(medialist.length)),
- _width = (this.split_screen ? this.width / _grid : this.width),
- _height = (this.split_screen ? this.height / _grid : this.height);
+ }
+
+ this.$.css({
+ background: this.background,
+ });
+
+ var _grid = Math.ceil(Math.sqrt(medialist.length)),
+ _width = this.split_screen ? this.width / _grid : this.width,
+ _height = this.split_screen ? this.height / _grid : this.height;
- IriSP._(medialist).each(function(_media, _key) {
- var _el = IriSP.jQuery('');
+ _(medialist).each(function (_media, _key) {
+ var _el = jQuery(
+ ''
+ );
_el.css({
- top: (_this.split_screen ? _height * Math.floor(_key / _grid) : 0),
- left: (_this.split_screen ? _width * (_key % _grid) : 0),
- height: _height,
- width: _width,
- display: (_this.split_screen ? "block" : "none")
+ top: _this.split_screen ? _height * Math.floor(_key / _grid) : 0,
+ left: _this.split_screen ? _width * (_key % _grid) : 0,
+ height: _height,
+ width: _width,
+ display: _this.split_screen ? "block" : "none",
});
_this.$.append(_el);
-
+
_this.insertSubwidget(
- _el.find(".Ldt-MashupPlayer-Subwidget"),
- IriSP._({
- type: _this.player_type,
- media_id: _media.id,
- height: _height,
- width: _width,
- url_transform: _this.url_transform
- }).extend(_this.player_options)
+ _el.find(".Ldt-MashupPlayer-Subwidget"),
+ _({
+ type: _this.player_type,
+ media_id: _media.id,
+ height: _height,
+ width: _width,
+ url_transform: _this.url_transform,
+ }).extend(_this.player_options)
);
-
+
_media.loadedMetadata = false;
- _media.show = function() {
- _el.show();
+ _media.show = function () {
+ _el.show();
};
- _media.hide = function() {
- _el.hide();
+ _media.hide = function () {
+ _el.hide();
};
- _media.on("loadedmetadata", function() {
- _media.loadedMetadata = true;
- var _allLoaded = true;
- for (var _i = 0; _i < medialist.length; _i++) {
- _allLoaded = _allLoaded && medialist[_i].loadedMetadata;
- }
- if (_allLoaded) {
- _seekdiv.fadeOut();
- changeCurrentAnnotation();
- _mashup.trigger("loadedmetadata");
- }
+ _media.on("loadedmetadata", function () {
+ _media.loadedMetadata = true;
+ var _allLoaded = true;
+ for (var _i = 0; _i < medialist.length; _i++) {
+ _allLoaded = _allLoaded && medialist[_i].loadedMetadata;
+ }
+ if (_allLoaded) {
+ _seekdiv.fadeOut();
+ changeCurrentAnnotation();
+ _mashup.trigger("loadedmetadata");
+ }
});
- _media.on("timeupdate", function(_time) {
- if (!_mashup.paused && _media === _currentMedia && !_media.seeking) {
-/*
+ _media.on("timeupdate", function (_time) {
+ if (!_mashup.paused && _media === _currentMedia && !_media.seeking) {
+ /*
var _status = "Timeupdate from " + _media.id + " at time " + _time;
*/
- if ( _time < _segmentEnd ) {
- if ( _time >= _segmentBegin ) {
- _timecode = _time - _timedelta;
-/*
+ if (_time < _segmentEnd) {
+ if (_time >= _segmentBegin) {
+ _timecode = _time - _timedelta;
+ /*
_status += " within segment";
*/
- } else {
- _timecode = _segmentBegin - _timedelta;
- _media.setCurrentTime(_segmentBegin);
-/*
+ } else {
+ _timecode = _segmentBegin - _timedelta;
+ _media.setCurrentTime(_segmentBegin);
+ /*
_status += " before segment";
*/
- }
- } else {
- _timecode = _segmentEnd - _timedelta;
- _media.pause();
- changeCurrentAnnotation();
-/*
+ }
+ } else {
+ _timecode = _segmentEnd - _timedelta;
+ _media.pause();
+ changeCurrentAnnotation();
+ /*
_status += " after segment";
*/
- }
-/*
+ }
+ /*
_status += " (" + _segmentBegin + " to " + _segmentEnd + ")" + ", translated to " + _timecode;
console.log(_status);
*/
- _mashup.trigger("timeupdate", new IriSP.Model.Time(_timecode));
- }
+ _mashup.trigger("timeupdate", new ns.Model.Time(_timecode));
+ }
});
- _media.on("seeked", function() {
- _media.seeking = false;
- if (_media === _currentMedia && _seeking) {
- _seeking = false;
- _seekdiv.hide();
- }
+ _media.on("seeked", function () {
+ _media.seeking = false;
+ if (_media === _currentMedia && _seeking) {
+ _seeking = false;
+ _seekdiv.hide();
+ }
});
- _media.on("play", function() {
- if (_media === _currentMedia) {
- _mashup.trigger("play");
- }
+ _media.on("play", function () {
+ if (_media === _currentMedia) {
+ _mashup.trigger("play");
+ }
});
- _media.on("pause", function() {
- if (_media === _currentMedia) {
- _mashup.trigger("pause");
- }
+ _media.on("pause", function () {
+ if (_media === _currentMedia) {
+ _mashup.trigger("pause");
+ }
});
- _media.on("volumechange", function() {
- _mashup.muted = _media.muted;
- _mashup.volume = _media.volume;
- _mashup.trigger("volumechange");
+ _media.on("volumechange", function () {
+ _mashup.muted = _media.muted;
+ _mashup.volume = _media.volume;
+ _mashup.trigger("volumechange");
});
- });
-
- _seekdiv = IriSP.jQuery('');
-
- this.$.append(_seekdiv);
+ });
+
+ _seekdiv = jQuery('');
- // Binding functions to Popcorn
-
- _mashup.on("setcurrenttime", function(_milliseconds) {
+ this.$.append(_seekdiv);
+
+ // Binding functions to Popcorn
+
+ _mashup.on("setcurrenttime", function (_milliseconds) {
_timecode = _milliseconds;
changeCurrentAnnotation();
- });
-
- _mashup.on("setvolume", function(_vol) {
+ });
+
+ _mashup.on("setvolume", function (_vol) {
for (var _i = 0; _i < medialist.length; _i++) {
- medialist[_i].setVolume(_vol);
+ medialist[_i].setVolume(_vol);
}
_mashup.volume = _vol;
- });
-
- _mashup.on("setmuted", function(_muted) {
+ });
+
+ _mashup.on("setmuted", function (_muted) {
for (var _i = 0; _i < medialist.length; _i++) {
- medialist[_i].setMuted(_muted);
+ medialist[_i].setMuted(_muted);
}
_mashup.muted = _muted;
- });
-
- _mashup.on("setplay", function() {
+ });
+
+ _mashup.on("setplay", function () {
_mashup.paused = false;
changeCurrentAnnotation();
- });
-
- _mashup.on("setpause", function() {
+ });
+
+ _mashup.on("setpause", function () {
_mashup.paused = true;
if (_currentMedia) {
- _currentMedia.pause();
+ _currentMedia.pause();
}
- });
-
- _mashup.on("loadedmetadata", changeCurrentAnnotation);
-
-};
\ No newline at end of file
+ });
+
+ _mashup.on("loadedmetadata", changeCurrentAnnotation);
+ }
+ };
+};
+
+export { MashupPlayer, mashupPlayerStyles };