Proyectos de Subversion Moodle

/**

 * videojs-ogvjs

 * @version 1.0.0

 * @copyright 2023 Huong Nguyen <huongnv13@gmail.com>

 * @license MIT

 */

define(['media_videojs/video-lazy', './local/ogv/ogv'], (function (videojs, ogv) { 'use strict';

	// We can access public classes either as ogv.OGVPlayer or just OGVPlayer.

	// But ogv.OGVPlayer will make the lint tools happier.

	const OGVCompat = ogv.OGVCompat;

	const OGVLoader = ogv.OGVLoader;

	const OGVPlayer = ogv.OGVPlayer;

	const Tech = videojs.getComponent('Tech');

	const androidOS = 'Android';

	const iPhoneOS = 'iPhoneOS';

	const iPadOS = 'iPadOS';

	const otherOS = 'Other';

	/**

	 * Object.defineProperty but "lazy", which means that the value is only set after

	 * it retrieved the first time, rather than being set right away.

	 *

	 * @param {Object} obj the object to set the property on.

	 * @param {string} key the key for the property to set.

	 * @param {Function} getValue the function used to get the value when it is needed.

	 * @param {boolean} setter whether a setter should be allowed or not.

	 */

	const defineLazyProperty = (obj, key, getValue, setter = true) => {

		const set = (value) => {

			Object.defineProperty(obj, key, {value, enumerable: true, writable: true});

		};

		const options = {

			configurable: true,

			enumerable: true,

			get() {

				const value = getValue();

				set(value);

				return value;

			}

		};

		if (setter) {

			options.set = set;

		}

		return Object.defineProperty(obj, key, options);

	};

	/**

	 * Get the device's OS.

	 *

	 * @return {string} Device's OS.

	 */

	const getDeviceOS = () => {

		/* global navigator */

		const ua = navigator.userAgent;

		if (/android/i.test(ua)) {

			return androidOS;

		} else if (/iPad|iPhone|iPod/.test(ua)) {

			return iPhoneOS;

		} else if ((navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {

			return iPadOS;

		}

		return otherOS;

	};

	/**

	 * OgvJS Media Controller - Wrapper for ogv.js Media API

	 *

	 * @mixes Tech~SourceHandlerAdditions

	 * @extends Tech

	 */

	class OgvJS extends Tech {

		/**

		 * Create an instance of this Tech.

		 *

		 * @param {Object} [options] The key/value store of player options.

		 * @param {Component~ReadyCallback} ready Callback function to call when the `OgvJS` Tech is ready.

		 */

		constructor(options, ready) {

			super(options, ready);

			this.el_.src = options.source.src;

			OgvJS.setIfAvailable(this.el_, 'autoplay', options.autoplay);

			OgvJS.setIfAvailable(this.el_, 'loop', options.loop);

			OgvJS.setIfAvailable(this.el_, 'poster', options.poster);

			OgvJS.setIfAvailable(this.el_, 'preload', options.preload);

			this.on('loadedmetadata', () => {

				if (getDeviceOS() === iPhoneOS) {

					// iPhoneOS add some inline styles to the canvas, we need to remove it.

					const canvas = this.el_.getElementsByTagName('canvas')[0];

					canvas.style.removeProperty('width');

					canvas.style.removeProperty('margin');

				}

			});

			this.triggerReady();

		}

		/**

		 * Create the 'OgvJS' Tech's DOM element.

		 *

		 * @return {Element} The element that gets created.

		 */

		createEl() {

			const options = this.options_;

			if (options.base) {

				OGVLoader.base = options.base;

			} else {

				throw new Error('Please specify the base for the ogv.js library');

			}

			const el = new OGVPlayer(options);

			el.className += ' vjs-tech';

			options.tag = el;

			return el;

		}

		/**

		 * Start playback

		 *

		 * @method play

		 */

		play() {

			this.el_.play();

		}

		/**

		 * Get the current playback speed.

		 *

		 * @return {number}

		 * @method playbackRate

		 */

		playbackRate() {

			return this.el_.playbackRate || 1;

		}

		/**

		 * Set the playback speed.

		 *

		 * @param {number} val Speed for the player to play.

		 * @method setPlaybackRate

		 */

		setPlaybackRate(val) {

			if (this.el_.hasOwnProperty('playbackRate')) {

				this.el_.playbackRate = val;

			}

		}

		/**

		 * Returns a TimeRanges object that represents the ranges of the media resource that the user agent has played.

		 *

		 * @return {TimeRangeObject} the range of points on the media timeline that has been reached through normal playback

		 */

		played() {

			return this.el_.played;

		}

		/**

		 * Pause playback

		 *

		 * @method pause

		 */

		pause() {

			this.el_.pause();

		}

		/**

		 * Is the player paused or not.

		 *

		 * @return {boolean}

		 * @method paused

		 */

		paused() {

			return this.el_.paused;

		}

		/**

		 * Get current playing time.

		 *

		 * @return {number}

		 * @method currentTime

		 */

		currentTime() {

			return this.el_.currentTime;

		}

		/**

		 * Set current playing time.

		 *

		 * @param {number} seconds Current time of audio/video.

		 * @method setCurrentTime

		 */

		setCurrentTime(seconds) {

			try {

				this.el_.currentTime = seconds;

			} catch (e) {

				videojs.log(e, 'Media is not ready. (Video.JS)');

			}

		}

		/**

		 * Get media's duration.

		 *

		 * @return {number}

		 * @method duration

		 */

		duration() {

			if (this.el_.duration && this.el_.duration !== Infinity) {

				return this.el_.duration;

			}

			return 0;

		}

		/**

		 * Get a TimeRange object that represents the intersection

		 * of the time ranges for which the user agent has all

		 * relevant media.

		 *

		 * @return {TimeRangeObject}

		 * @method buffered

		 */

		buffered() {

			return this.el_.buffered;

		}

		/**

		 * Get current volume level.

		 *

		 * @return {number}

		 * @method volume

		 */

		volume() {

			return this.el_.hasOwnProperty('volume') ? this.el_.volume : 1;

		}

		/**

		 * Set current playing volume level.

		 *

		 * @param {number} percentAsDecimal Volume percent as a decimal.

		 * @method setVolume

		 */

		setVolume(percentAsDecimal) {

			// Apple does not allow iOS and iPadOS devices to set the volume on UI.

			if (getDeviceOS() !== iPhoneOS && getDeviceOS() !== iPadOS && this.el_.hasOwnProperty('volume')) {

				this.el_.volume = percentAsDecimal;

			}

		}

		/**

		 * Is the player muted or not.

		 *

		 * @return {boolean}

		 * @method muted

		 */

		muted() {

			return this.el_.muted;

		}

		/**

		 * Mute the player.

		 *

		 * @param {boolean} muted True to mute the player.

		 */

		setMuted(muted) {

			this.el_.muted = !!muted;

		}

		/**

		 * Is the player muted by default or not.

		 *

		 * @return {boolean}

		 * @method defaultMuted

		 */

		defaultMuted() {

			return this.el_.defaultMuted || false;

		}

		/**

		 * Get the player width.

		 *

		 * @return {number}

		 * @method width

		 */

		width() {

			return this.el_.offsetWidth;

		}

		/**

		 * Get the player height.

		 *

		 * @return {number}

		 * @method height

		 */

		height() {

			return this.el_.offsetHeight;

		}

		/**

		 * Get the video width.

		 *

		 * @return {number}

		 * @method videoWidth

		 */

		videoWidth() {

			return this.el_.videoWidth;

		}

		/**

		 * Get the video height.

		 *

		 * @return {number}

		 * @method videoHeight

		 */

		videoHeight() {

			return this.el_.videoHeight;

		}

		/**

		 * Get/set media source.

		 *

		 * @param {Object=} src Source object

		 * @return {Object}

		 * @method src

		 */

		src(src) {

			if (typeof src === 'undefined') {

				return this.el_.src;

			}

			this.el_.src = src;

		}

		/**

		 * Load the media into the player.

		 *

		 * @method load

		 */

		load() {

			this.el_.load();

		}

		/**

		 * Get current media source.

		 *

		 * @return {Object}

		 * @method currentSrc

		 */

		currentSrc() {

			if (this.currentSource_) {

				return this.currentSource_.src;

			}

			return this.el_.currentSrc;

		}

		/**

		 * Get media poster URL.

		 *

		 * @return {string}

		 * @method poster

		 */

		poster() {

			return this.el_.poster;

		}

		/**

		 * Set media poster URL.

		 *

		 * @param {string} url the poster image's url.

		 * @method

		 */

		setPoster(url) {

			this.el_.poster = url;

		}

		/**

		 * Is the media preloaded or not.

		 *

		 * @return {string}

		 * @method preload

		 */

		preload() {

			return this.el_.preload || 'none';

		}

		/**

		 * Set the media preload method.

		 *

		 * @param {string} val Value for preload attribute.

		 * @method setPreload

		 */

		setPreload(val) {

			if (this.el_.hasOwnProperty('preload')) {

				this.el_.preload = val;

			}

		}

		/**

		 * Is the media auto-played or not.

		 *

		 * @return {boolean}

		 * @method autoplay

		 */

		autoplay() {

			return this.el_.autoplay || false;

		}

		/**

		 * Set media autoplay method.

		 *

		 * @param {boolean} val Value for autoplay attribute.

		 * @method setAutoplay

		 */

		setAutoplay(val) {

			if (this.el_.hasOwnProperty('autoplay')) {

				this.el_.autoplay = !!val;

			}

		}

		/**

		 * Does the media has controls or not.

		 *

		 * @return {boolean}

		 * @method controls

		 */

		controls() {

			return this.el_.controls || false;

		}

		/**

		 * Set the media controls method.

		 *

		 * @param {boolean} val Value for controls attribute.

		 * @method setControls

		 */

		setControls(val) {

			if (this.el_.hasOwnProperty('controls')) {

				this.el_.controls = !!val;

			}

		}

		/**

		 * Is the media looped or not.

		 *

		 * @return {boolean}

		 * @method loop

		 */

		loop() {

			return this.el_.loop || false;

		}

		/**

		 * Set the media loop method.

		 *

		 * @param {boolean} val Value for loop attribute.

		 * @method setLoop

		 */

		setLoop(val) {

			if (this.el_.hasOwnProperty('loop')) {

				this.el_.loop = !!val;

			}

		}

		/**

		 * Get a TimeRanges object that represents the

		 * ranges of the media resource to which it is possible

		 * for the user agent to seek.

		 *

		 * @return {TimeRangeObject}

		 * @method seekable

		 */

		seekable() {

			return this.el_.seekable;

		}

		/**

		 * Is player in the "seeking" state or not.

		 *

		 * @return {boolean}

		 * @method seeking

		 */

		seeking() {

			return this.el_.seeking;

		}

		/**

		 * Is the media ended or not.

		 *

		 * @return {boolean}

		 * @method ended

		 */

		ended() {

			return this.el_.ended;

		}

		/**

		 * Get the current state of network activity

		 * NETWORK_EMPTY (numeric value 0)

		 * NETWORK_IDLE (numeric value 1)

		 * NETWORK_LOADING (numeric value 2)

		 * NETWORK_NO_SOURCE (numeric value 3)

		 *

		 * @return {number}

		 * @method networkState

		 */

		networkState() {

			return this.el_.networkState;

		}

		/**

		 * Get the current state of the player.

		 * HAVE_NOTHING (numeric value 0)

		 * HAVE_METADATA (numeric value 1)

		 * HAVE_CURRENT_DATA (numeric value 2)

		 * HAVE_FUTURE_DATA (numeric value 3)

		 * HAVE_ENOUGH_DATA (numeric value 4)

		 *

		 * @return {number}

		 * @method readyState

		 */

		readyState() {

			return this.el_.readyState;

		}

		/**

		 * Does the player support native fullscreen mode or not. (Mobile devices)

		 *

		 * @return {boolean}

		 */

		supportsFullScreen() {

			// iOS devices have some problem with HTML5 fullscreen api so we need to fallback to fullWindow mode.

			return false;

		}

		/**

		 * Get media player error.

		 *

		 * @return {string}

		 * @method error

		 */

		error() {

			return this.el_.error;

		}

	}

	/**

	 * List of available events of the media player.

	 *

	 * @private

	 * @type {Array}

	 */

	OgvJS.Events = [

		'loadstart',

		'suspend',

		'abort',

		'error',

		'emptied',

		'stalled',

		'loadedmetadata',

		'loadeddata',

		'canplay',

		'canplaythrough',

		'playing',

		'waiting',

		'seeking',

		'seeked',

		'ended',

		'durationchange',

		'timeupdate',

		'progress',

		'play',

		'pause',

		'ratechange',

		'resize',

		'volumechange'

	];

	/**

	 * Set the value for the player is it has that property.

	 *

	 * @param {Element} el

	 * @param {string} name

	 * @param value

	 */

	OgvJS.setIfAvailable = (el, name, value) => {

		if (el.hasOwnProperty(name)) {

			el[name] = value;

		}

	};

	/**

	 * Check if browser/device is supported by Ogv.JS.

	 *

	 * @return {boolean}

	 */

	OgvJS.isSupported = () => {

		return OGVCompat.supported('OGVPlayer');

	};

	/**

	 * Check if the tech can support the given type.

	 *

	 * @param {string} type The mimetype to check

	 * @return {string} 'probably', 'maybe', or '' (empty string)

	 */

	OgvJS.canPlayType = (type) => {

		return (type.indexOf('/ogg') !== -1 || type.indexOf('/webm')) ? 'maybe' : '';

	};

	/**

	 * Check if the tech can support the given source

	 *

	 * @param srcObj The source object

	 * @return {string} The options passed to the tech

	 */

	OgvJS.canPlaySource = (srcObj) => {

		return OgvJS.canPlayType(srcObj.type);

	};

	/**

	 * Check if the volume can be changed in this browser/device.

	 * Volume cannot be changed in a lot of mobile devices.

	 * Specifically, it can't be changed on iOS and iPadOS.

	 *

	 * @return {boolean} True if volume can be controlled.

	 */

	OgvJS.canControlVolume = () => {

		if (getDeviceOS() === iPhoneOS || getDeviceOS() === iPadOS) {

			return false;

		}

		const p = new OGVPlayer();

		return p.hasOwnProperty('volume');

	};

	/**

	 * Check if the volume can be muted in this browser/device.

	 *

	 * @return {boolean} True if volume can be muted.

	 */

	OgvJS.canMuteVolume = () => {

		return true;

	};

	/**

	 * Check if the playback rate can be changed in this browser/device.

	 *

	 * @return {boolean} True if playback rate can be controlled.

	 */

	OgvJS.canControlPlaybackRate = () => {

		return true;

	};

	/**

	 * Check to see if native 'TextTracks' are supported by this browser/device.

	 *

	 * @return {boolean} True if native 'TextTracks' are supported.

	 */

	OgvJS.supportsNativeTextTracks = () => {

		return false;

	};

	/**

	 * Check if the fullscreen resize is supported by this browser/device.

	 *

	 * @return {boolean} True if the fullscreen resize is supported.

	 */

	OgvJS.supportsFullscreenResize = () => {

		return true;

	};

	/**

	 * Check if the progress events is supported by this browser/device.

	 *

	 * @return {boolean} True if the progress events is supported.

	 */

	OgvJS.supportsProgressEvents = () => {

		return true;

	};

	/**

	 * Check if the time update events is supported by this browser/device.

	 *

	 * @return {boolean} True if the time update events is supported.

	 */

	OgvJS.supportsTimeupdateEvents = () => {

		return true;

	};

	/**

	 * Boolean indicating whether the 'OgvJS' tech supports volume control.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.canControlVolume}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech supports muting volume.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.canMuteVolume}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech supports changing the speed at which the media plays.

	 * Examples:

	 *   - Set player to play 2x (twice) as fast.

	 *   - Set player to play 0.5x (half) as fast.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.canControlPlaybackRate}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech currently supports native 'TextTracks'.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.supportsNativeTextTracks}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech currently supports fullscreen resize.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.supportsFullscreenResize}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech currently supports progress events.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.supportsProgressEvents}

	 */

	/**

	 * Boolean indicating whether the 'OgvJS' tech currently supports time update events.

	 *

	 * @type {boolean}

	 * @default {@link OgvJS.supportsTimeupdateEvents}

	 */

	[

		['featuresVolumeControl', 'canControlVolume'],

		['featuresMuteControl', 'canMuteVolume'],

		['featuresPlaybackRate', 'canControlPlaybackRate'],

		['featuresNativeTextTracks', 'supportsNativeTextTracks'],

		['featuresFullscreenResize', 'supportsFullscreenResize'],

		['featuresProgressEvents', 'supportsProgressEvents'],

		['featuresTimeupdateEvents', 'supportsTimeupdateEvents']

	].forEach(([key, fn]) => {

		defineLazyProperty(OgvJS.prototype, key, () => OgvJS[fn](), true);

	});

	Tech.registerTech('OgvJS', OgvJS);

	return OgvJS;

}));