--- a/src/widgets/HtmlMashupPlayer.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/HtmlMashupPlayer.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,42 +1,42 @@
-IriSP.Widgets.HtmlMashupPlayer = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-};
+//HtmlMashupPlayer
-IriSP.Widgets.HtmlMashupPlayer.prototype = new IriSP.Widgets.Widget();
-
+const HtmlMashupPlayer = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
-IriSP.Widgets.HtmlMashupPlayer.prototype.defaults = {
- aspect_ratio: 14/9,
- background: "#333333"
-};
+ static defaults = {
+ aspect_ratio: 14 / 9,
+ background: "#333333",
+ };
-IriSP.Widgets.HtmlMashupPlayer.prototype.draw = function() {
-
- if (!this.height && this.aspect_ratio) {
+ draw() {
+ if (!this.height && this.aspect_ratio) {
this.height = this.width / this.aspect_ratio;
this.$.css("height", this.height);
- }
-
- if (this.background) {
+ }
+
+ if (this.background) {
this.$.css("background", this.background);
- }
-
- var mashup = this.media,
+ }
+
+ var mashup = this.media,
sel = this.$,
width = this.width,
height = this.height,
url_transform = this.url_transform;
-
- mashup.currentMedia = null;
- mashup.currentAnnotation = null;
- mashup.seeking = false;
- var mashupSegmentBegin,
+
+ mashup.currentMedia = null;
+ mashup.currentAnnotation = null;
+ mashup.seeking = false;
+ var mashupSegmentBegin,
mashupSegmentEnd,
mashupTimecode = 0,
- // seekdiv = $(".video-wait"),
+ // seekdiv = $(".video-wait"),
mashupTimedelta;
-
-/*
+
+ /*
function showSeek() {
if (currentMedia.seeking) {
seekdiv.show();
@@ -44,302 +44,328 @@
}
*/
- function changeCurrentAnnotation() {
+ function changeCurrentAnnotation() {
if (mashupTimecode >= mashup.duration) {
- if (!mashup.paused) {
- mashup.paused = true;
- mashup.trigger("pause");
- }
- mashupTimecode = 0;
+ if (!mashup.paused) {
+ mashup.paused = true;
+ mashup.trigger("pause");
+ }
+ mashupTimecode = 0;
}
- var _annotation = mashup.getAnnotationAtTime( mashupTimecode );
+ var _annotation = mashup.getAnnotationAtTime(mashupTimecode);
if (typeof _annotation === "undefined") {
- if (mashup.currentMedia) {
- mashup.currentMedia.pause();
- if (!mashup.paused) {
- mashup.paused = true;
- mashup.trigger("pause");
- }
+ if (mashup.currentMedia) {
+ mashup.currentMedia.pause();
+ if (!mashup.paused) {
+ mashup.paused = true;
+ mashup.trigger("pause");
}
- return;
+ }
+ return;
}
mashup.currentAnnotation = _annotation;
- mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+ mashupSegmentBegin =
+ mashup.currentAnnotation.annotation.begin.milliseconds;
mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
- mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+ mashupTimedelta =
+ mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
mashup.currentMedia = mashup.currentAnnotation.getMedia();
- mashup.getMedias().forEach(function(_media) {
- if (_media !== mashup.currentMedia) {
- _media.hide();
- _media.pause();
- } else {
- _media.show();
- }
+ mashup.getMedias().forEach(function (_media) {
+ if (_media !== mashup.currentMedia) {
+ _media.hide();
+ _media.pause();
+ } else {
+ _media.show();
+ }
});
-
- mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);
+
+ mashup.currentMedia.setCurrentTime(mashupTimecode + mashupTimedelta);
mashup.currentMedia.seeking = true;
-
- if (!mashup.paused) {
- mashup.currentMedia.play();
- mashup.seeking = true;
-// setTimeout(showSeek,200);
- }
- mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
- }
-
- mashup.getMedias().forEach(addMedia);
- changeCurrentAnnotation();
- mashup.trigger("loadedmetadata");
-
- function addMedia(media) {
+ if (!mashup.paused) {
+ mashup.currentMedia.play();
+ mashup.seeking = true;
+ // setTimeout(showSeek,200);
+ }
+ mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode));
+ }
+
+ mashup.getMedias().forEach(addMedia);
+ changeCurrentAnnotation();
+ mashup.trigger("loadedmetadata");
+
+ function addMedia(media) {
if (media.has_player) {
- return;
+ return;
}
media.has_player = true;
var videourl = media.video;
if (typeof url_transform === "function") {
- videourl = url_transform(media.video);
+ videourl = url_transform(media.video);
}
var videoid = "video_" + media.id,
- videoElement;
-
- media.show = function() {
-
- if (document.getElementById(videoid)) {
- return;
- }
-
- media.loaded = false;
- media.paused = true;
- var videoSelector = $('<video>');
-
- videoSelector.attr({
- id : videoid,
- width : width,
- height : height
- }).css({
- width: width,
- height: height
- });
-
- if (typeof videourl === "string") {
- videoSelector.attr( "src", videourl );
- } else {
- for (var i = 0; i < videourl.length; i++) {
- var _srcNode = IriSP.jQuery('<source>');
- _srcNode.attr({
- src: videourl[i].src,
- type: videourl[i].type
- });
- videoSelector.append(_srcNode);
- }
- }
-
- sel.append(videoSelector);
-
- videoElement = videoSelector[0];
-
- // Binding DOM events to media
-
- function getVolume() {
- media.muted = videoElement.muted;
- media.volume = videoElement.volume;
- }
-
- videoSelector.on("loadedmetadata", function() {
- getVolume();
- media.loaded = true;
- media.trigger("loadedmetadata");
- media.trigger("volumechange");
- });
-
- videoSelector.on("timeupdate", function() {
- media.trigger("timeupdate", new IriSP.Model.Time(1000*videoElement.currentTime));
- });
-
- videoSelector.on("volumechange", function() {
- getVolume();
- media.trigger("volumechange");
+ videoElement;
+
+ media.show = function () {
+ if (document.getElementById(videoid)) {
+ return;
+ }
+
+ media.loaded = false;
+ media.paused = true;
+ var videoSelector = $("<video>");
+
+ videoSelector
+ .attr({
+ id: videoid,
+ width: width,
+ height: height,
+ })
+ .css({
+ width: width,
+ height: height,
});
-
- videoSelector.on("play", function() {
- media.trigger("play");
- });
-
- videoSelector.on("pause", function() {
- media.trigger("pause");
- });
-
- videoSelector.on("seeking", function() {
- media.trigger("seeking");
- });
-
- videoSelector.on("seeked", function() {
- media.trigger("seeked");
- });
+
+ if (typeof videourl === "string") {
+ videoSelector.attr("src", videourl);
+ } else {
+ for (var i = 0; i < videourl.length; i++) {
+ var _srcNode = ns.jQuery("<source>");
+ _srcNode.attr({
+ src: videourl[i].src,
+ type: videourl[i].type,
+ });
+ videoSelector.append(_srcNode);
+ }
+ }
+
+ sel.append(videoSelector);
+
+ videoElement = videoSelector[0];
+
+ // Binding DOM events to media
+
+ function getVolume() {
+ media.muted = videoElement.muted;
+ media.volume = videoElement.volume;
+ }
+
+ videoSelector.on("loadedmetadata", function () {
+ getVolume();
+ media.loaded = true;
+ media.trigger("loadedmetadata");
+ media.trigger("volumechange");
+ });
+
+ videoSelector.on("timeupdate", function () {
+ media.trigger(
+ "timeupdate",
+ new ns.Model.Time(1000 * videoElement.currentTime)
+ );
+ });
+
+ videoSelector.on("volumechange", function () {
+ getVolume();
+ media.trigger("volumechange");
+ });
+
+ videoSelector.on("play", function () {
+ media.trigger("play");
+ });
+
+ videoSelector.on("pause", function () {
+ media.trigger("pause");
+ });
+
+ videoSelector.on("seeking", function () {
+ media.trigger("seeking");
+ });
+
+ videoSelector.on("seeked", function () {
+ media.trigger("seeked");
+ });
};
-
- media.hide = function() {
- videoElement = undefined;
- sel.find("#" + videoid).remove();
+
+ media.hide = function () {
+ videoElement = undefined;
+ sel.find("#" + videoid).remove();
};
-
+
// Binding functions to Media Element Functions
-
+
var deferredTime = undefined,
- deferredPlayPause = undefined;
-
- media.on("setcurrenttime", function(_milliseconds) {
- if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
- try {
- videoElement.currentTime = (_milliseconds / 1000);
- deferredTime = undefined;
- } catch(err) {
- deferredTime = _milliseconds;
- }
- } else {
- deferredTime = _milliseconds;
- }
- });
-
- media.on("setvolume", function(_vol) {
- if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
- media.volume = _vol;
- videoElement.volume = _vol;
+ deferredPlayPause = undefined;
+
+ media.on("setcurrenttime", function (_milliseconds) {
+ if (
+ videoElement &&
+ videoElement.readyState >= videoElement.HAVE_METADATA
+ ) {
+ try {
+ videoElement.currentTime = _milliseconds / 1000;
+ deferredTime = undefined;
+ } catch (err) {
+ deferredTime = _milliseconds;
}
- });
-
- media.on("setmuted", function(_muted) {
- if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
- media.muted = _muted;
- videoElement.muted = _muted;
- }
+ } else {
+ deferredTime = _milliseconds;
+ }
});
-
- media.on("setplay", function() {
- if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
- try {
- videoElement.play();
- deferredPlayPause = undefined;
- } catch(err) {
- deferredPlayPause = true;
- }
- } else {
- deferredPlayPause = true;
- }
+
+ media.on("setvolume", function (_vol) {
+ if (
+ videoElement &&
+ videoElement.readyState >= videoElement.HAVE_METADATA
+ ) {
+ media.volume = _vol;
+ videoElement.volume = _vol;
+ }
+ });
+
+ media.on("setmuted", function (_muted) {
+ if (
+ videoElement &&
+ videoElement.readyState >= videoElement.HAVE_METADATA
+ ) {
+ media.muted = _muted;
+ videoElement.muted = _muted;
+ }
});
- media.on("setpause", function() {
- if (videoElement && videoElement.readyState >= videoElement.HAVE_METADATA) {
- try {
- videoElement.pause();
- deferredPlayPause = undefined;
- } catch(err) {
- deferredPlayPause = false;
- }
- } else {
- deferredPlayPause = false;
- }
- });
-
- media.on("loadedmetadata", function() {
- if (typeof deferredTime !== "undefined") {
- media.setCurrentTime(deferredTime);
+ media.on("setplay", function () {
+ if (
+ videoElement &&
+ videoElement.readyState >= videoElement.HAVE_METADATA
+ ) {
+ try {
+ videoElement.play();
+ deferredPlayPause = undefined;
+ } catch (err) {
+ deferredPlayPause = true;
}
- if (typeof deferredPlayPause !== "undefined") {
- if (deferredPlayPause) {
- media.play();
- } else {
- media.pause();
- }
- }
+ } else {
+ deferredPlayPause = true;
+ }
});
-
- // Binding UI Events and Mashup Playing to Media
-
- media.on("play", function() {
- if (media === mashup.currentMedia) {
- mashup.trigger("play");
+
+ media.on("setpause", function () {
+ if (
+ videoElement &&
+ videoElement.readyState >= videoElement.HAVE_METADATA
+ ) {
+ try {
+ videoElement.pause();
+ deferredPlayPause = undefined;
+ } catch (err) {
+ deferredPlayPause = false;
}
+ } else {
+ deferredPlayPause = false;
+ }
});
-
- media.on("pause", function() {
- if (media === mashup.currentMedia) {
- mashup.trigger("pause");
+
+ media.on("loadedmetadata", function () {
+ if (typeof deferredTime !== "undefined") {
+ media.setCurrentTime(deferredTime);
+ }
+ if (typeof deferredPlayPause !== "undefined") {
+ if (deferredPlayPause) {
+ media.play();
+ } else {
+ media.pause();
}
+ }
});
-
- media.on("timeupdate", function(_time) {
- if (!mashup.paused && media === mashup.currentMedia && !media.seeking) {
- if ( _time < mashupSegmentEnd ) {
- if ( _time >= mashupSegmentBegin ) {
- mashupTimecode = _time - mashupTimedelta;
- } else {
- mashupTimecode = mashupSegmentBegin - mashupTimedelta;
- media.setCurrentTime(mashupSegmentBegin);
- }
- } else {
- mashupTimecode = mashupSegmentEnd - mashupTimedelta;
- media.pause();
- changeCurrentAnnotation();
- }
- mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
- }
+
+ // Binding UI Events and Mashup Playing to Media
+
+ media.on("play", function () {
+ if (media === mashup.currentMedia) {
+ mashup.trigger("play");
+ }
+ });
+
+ media.on("pause", function () {
+ if (media === mashup.currentMedia) {
+ mashup.trigger("pause");
+ }
});
-
- media.on("seeked", function() {
- media.seeking = false;
- if (media === mashup.currentMedia && mashup.seeking) {
- mashup.seeking = false;
+
+ media.on("timeupdate", function (_time) {
+ if (
+ !mashup.paused &&
+ media === mashup.currentMedia &&
+ !media.seeking
+ ) {
+ if (_time < mashupSegmentEnd) {
+ if (_time >= mashupSegmentBegin) {
+ mashupTimecode = _time - mashupTimedelta;
+ } else {
+ mashupTimecode = mashupSegmentBegin - mashupTimedelta;
+ media.setCurrentTime(mashupSegmentBegin);
+ }
+ } else {
+ mashupTimecode = mashupSegmentEnd - mashupTimedelta;
+ media.pause();
+ changeCurrentAnnotation();
}
-// seekdiv.hide();
+ mashup.trigger("timeupdate", new ns.Model.Time(mashupTimecode));
+ }
});
-
- media.on("volumechange", function() {
- mashup.muted = media.muted;
- mashup.volume = media.volume;
- mashup.trigger("volumechange");
+
+ media.on("seeked", function () {
+ media.seeking = false;
+ if (media === mashup.currentMedia && mashup.seeking) {
+ mashup.seeking = false;
+ }
+ // seekdiv.hide();
});
-
- }
- // Mashup Events
-
- mashup.on("setcurrenttime", function(_milliseconds) {
+ media.on("volumechange", function () {
+ mashup.muted = media.muted;
+ mashup.volume = media.volume;
+ mashup.trigger("volumechange");
+ });
+ }
+
+ // Mashup Events
+
+ mashup.on("setcurrenttime", function (_milliseconds) {
mashupTimecode = _milliseconds;
changeCurrentAnnotation();
- });
-
- mashup.on("setvolume", function(_vol) {
- mashup.getMedias().forEach(function(_media) {
- _media.setVolume(_vol);
+ });
+
+ mashup.on("setvolume", function (_vol) {
+ mashup.getMedias().forEach(function (_media) {
+ _media.setVolume(_vol);
});
mashup.volume = _vol;
- });
-
- mashup.on("setmuted", function(_muted) {
- mashup.getMedias().forEach(function(_media) {
- _media.setMuted(_muted);
+ });
+
+ mashup.on("setmuted", function (_muted) {
+ mashup.getMedias().forEach(function (_media) {
+ _media.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 (mashup.currentMedia) {
- mashup.currentMedia.pause();
+ mashup.currentMedia.pause();
}
- });
-
- mashup.on("loadedmetadata", function() {
+ });
+
+ mashup.on("loadedmetadata", function () {
changeCurrentAnnotation();
- });
-
-};
\ No newline at end of file
+ });
+ }
+ };
+};
+
+export { HtmlMashupPlayer };