metadataplayer: src/widgets/Slider.js@ac1eacb3aa33 (annotated)

Mercurial Mercurial > metadataplayer / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/widgets/Slider.js

author	ymh <ymh.work@gmail.com>
	Wed, 04 Sep 2024 17:32:50 +0200
changeset 1072	ac1eacb3aa33
parent 1068	7623f9af9272
permissions	-rw-r--r--

Migrate source and build to vite.js

874 38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	1	/*
38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	2	The Slider Widget fits right under the video
38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	3	*/
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	4	import sliderStyles from "./Slider.module.css";
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	5	import jQuery from "jquery";
289 c0e399fbf3fb due to a np++ crash, some files where created in with windows line endings. hamidouk parents: 260 diff changeset	6
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	7	const Slider = function (ns) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	8	return class extends ns.Widgets.Widget {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	9	constructor(player, config) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	10	super(player, config);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	11	}
875 43629caa77bc Big refactoring of widget files + started migration of segmentwidget veltr parents: 874 diff changeset	12
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	13	static defaults = {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	14	minimized_height: 4,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	15	maximized_height: 4,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	16	minimize_timeout: 1500 /* time before minimizing slider after mouseout,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	17	set to zero for fixed slider */,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	18	};
965 eadb7290c325 Improvements in widget communication veltr parents: 960 diff changeset	19
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	20	static template =
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	21	'<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	22
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	23	draw() {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	24	this.renderTemplate();
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	25
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	26	this.$time = this.$.find(".Ldt-Slider-Time");
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	27
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	28	this.$slider = this.$.find(".Ldt-Slider");
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	29
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	30	var _this = this;
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	31
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	32	this.$slider.slider({
874 38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	33	range: "min",
38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	34	value: 0,
38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	35	min: 0,
887 6a04bd37da0a Corrected lib loading function so several instances of the Metadataplayer can be called veltr parents: 881 diff changeset	36	max: this.source.getDuration().milliseconds,
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	37	slide: function (event, ui) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	38	_this.media.setCurrentTime(ui.value);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	39	_this.player.trigger("Mediafragment.setHashToTime");
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	40	},
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	41	});
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	42
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	43	this.$handle = this.$slider.find(".ui-slider-handle");
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	44
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	45	this.onMediaEvent("timeupdate", "onTimeupdate");
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	46	this.onMdpEvent("Player.MouseOver", "onMouseover");
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	47	this.onMdpEvent("Player.MouseOut", "onMouseout");
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	48
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	49	if (this.minimize_timeout) {
909 aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	50	this.$slider.css(this.calculateSliderCss(this.minimized_height));
aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	51	this.$handle.css(this.calculateHandleCss(this.minimized_height));
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	52
909 aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	53	this.maximized = false;
aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	54	this.timeoutId = false;
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	55	}
1068 7623f9af9272 merge pull request #3 from O. Auber ymh <ymh.work@gmail.com> parents: 1021 diff changeset	56
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	57	this.$slider
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	58	.mouseover(function () {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	59	_this.$time.show();
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	60	_this.onMouseover();
965 eadb7290c325 Improvements in widget communication veltr parents: 960 diff changeset	61	})
eadb7290c325 Improvements in widget communication veltr parents: 960 diff changeset	62	.mouseout(this.functionWrapper("onMouseout"))
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	63	.mousemove(function (_e) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	64	var _x = _e.pageX - _this.$.offset().left,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	65	_t = new ns.Model.Time((_this.media.duration * _x) / _this.width);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	66	_this.$time.text(_t.toString()).css("left", _x);
965 eadb7290c325 Improvements in widget communication veltr parents: 960 diff changeset	67	});
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	68	}
289 c0e399fbf3fb due to a np++ crash, some files where created in with windows line endings. hamidouk parents: 260 diff changeset	69
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	70	onTimeupdate(_time) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	71	this.$slider.slider("value", _time);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	72	this.player.trigger("Arrow.updatePosition", {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	73	widget: this.type,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	74	time: _time,
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	75	});
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	76	}
289 c0e399fbf3fb due to a np++ crash, some files where created in with windows line endings. hamidouk parents: 260 diff changeset	77
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	78	onMouseover() {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	79	if (this.minimize_timeout) {
909 aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	80	if (this.timeoutId) {
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	81	window.clearTimeout(this.timeoutId);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	82	this.timeoutId = false;
909 aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	83	}
aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	84	if (!this.maximized) {
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	85	this.animateToHeight(this.maximized_height);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	86	this.maximized = true;
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	87	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	88	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	89	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	90
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	91	onMouseout() {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	92	this.$time.hide();
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	93	if (this.minimize_timeout) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	94	if (this.timeoutId) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	95	window.clearTimeout(this.timeoutId);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	96	this.timeoutId = false;
909 aa0e42229784 Started reworking on documentation veltr parents: 887 diff changeset	97	}
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	98	var _this = this;
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	99	this.timeoutId = window.setTimeout(function () {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	100	if (_this.maximized) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	101	_this.animateToHeight(_this.minimized_height);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	102	_this.maximized = false;
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	103	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	104	_this.timeoutId = false;
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	105	}, this.minimize_timeout);
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	106	}
874 38b65761a7d5 TooltipWidget, SliderWidget, corrections in AnnotationList, CSS are now split veltr parents: 842 diff changeset	107	}
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	108
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	109	animateToHeight(_height) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	110	this.$slider
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	111	.stop()
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	112	.animate(this.calculateSliderCss(_height), 500, function () {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	113	jQuery(this).css("overflow", "visible");
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	114	});
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	115	this.$handle
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	116	.stop()
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	117	.animate(this.calculateHandleCss(_height), 500, function () {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	118	jQuery(this).css("overflow", "visible");
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	119	});
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	120	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	121
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	122	calculateSliderCss(_size) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	123	return {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	124	height: _size + "px",
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	125	"margin-top": this.minimized_height - _size + "px",
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	126	};
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	127	}
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	128
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	129	calculateHandleCss = function (_size) {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	130	return {
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	131	height: 2 + _size + "px",
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	132	width: 2 + _size + "px",
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	133	"margin-left": -Math.ceil(2 + _size / 2) + "px",
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	134	};
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	135	};
ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	136	};
1013 392ddcd212d7 Throwed in a bunch of semicolons veltr parents: 965 diff changeset	137	};
347 9c55d584d3a9 slider maximization when rolled over now works. hamidouk parents: 332 diff changeset	138
1072 ac1eacb3aa33 Migrate source and build to vite.js ymh <ymh.work@gmail.com> parents: 1068 diff changeset	139	export { Slider, sliderStyles };

metadataplayer