@meuuhdia/video-player 1.0.0

package/modules/controls.js

@@ -0,0 +1,328 @@
+import { MeuuhdiaCaption } from "./caption.js";
+import { meuuhdiaDisclosure } from "./disclosure.js";
+import { MeuuhdiaIcon } from "./icon.js";
+import { MeuuhdiaTime } from "./time.js";
+
+class MeuuhdiaControls {
+    /**
+     * @type {Object}
+     */
+    locale;
+
+    /**
+     * @type {Node}
+     */
+    controls;
+
+    /**
+     * @type {Node}
+     */
+    wrapper;
+
+    /**
+     * @type {Node}
+     */
+    video;
+
+    /**
+     * @type {int}
+     */
+    controlsTimeout;
+
+    /**
+     * ? MeuuhdiaControls constructor
+     * 
+     * @param {Object} locale 
+     * @param {Node} wrapper 
+     * @param {Node} video 
+     */
+    constructor(locale, wrapper, video) {
+        this.locale = locale;
+        this.wrapper = wrapper;
+        this.video = video;
+
+        this.#initControls();
+    }
+
+    #initControls() {
+        this.controls = document.createElement("ul");
+        this.controls.classList.add("meuuhdia_controls", "list-unstyled");
+
+        let play = this.#createButton("meuuhdia_playpause", MeuuhdiaIcon.createIcon("play"), this.locale.controls.play);
+        let progress = this.#createProgressDuration();
+        let volume = this.#createProgressVolume();
+        let fullscreen = this.#createButton("meuuhdia_fs", MeuuhdiaIcon.createIcon("expand"), this.locale.controls.fullscreen);
+        fullscreen.setAttribute("aria-pressed", "false");
+
+        this.controls.appendChild(play);
+        this.controls.appendChild(progress);
+        this.controls.appendChild(volume);
+
+        if(0 < this.video.textTracks.length) {
+            let Caption = new MeuuhdiaCaption(this.locale, this.wrapper, this.video, this.controls);
+            this.wrapper.appendChild(Caption.createCaptionContainer());
+            this.controls.appendChild(Caption.createCaption(this.video.textTracks));            
+        }
+
+        this.controls.appendChild(fullscreen);
+        this.#actionAddEventListeners();
+    }
+
+    #actionAddEventListeners() {
+        let playPause = this.controls.querySelector(".meuuhdia_playpause");
+        let mute = this.controls.querySelector(".meuuhdia_mute");
+        let volume = this.controls.querySelector(".meuuhdia_volume_bar");
+        let fullscreen = this.controls.querySelector(".meuuhdia_fs");
+        
+        playPause.addEventListener("click", this.#actionPlayPause.bind(this));
+        this.video.addEventListener("click", this.#actionPlayPause.bind(this));
+        this.video.addEventListener("keyup", this.#checkKey.bind(this));
+        mute.addEventListener("click", this.#actionMute.bind(this));
+        volume.addEventListener("change", (evt) => {
+            this.video.volume = evt.currentTarget.value;
+        });
+        this.#timeProgress();
+        
+        if (!document?.fullscreenEnabled) fullscreen.style.display = "none";
+        else {
+            fullscreen.addEventListener("click", this.#fullscreen.bind(this));
+
+            document.addEventListener("fullscreenchange", (e) => {
+                this.#setFullscreenData(!!document.fullscreenElement);
+            });              
+        }
+
+        this.video.addEventListener("volumechange", this.#setVolumeIcon.bind(this));
+    }
+
+    #checkKey(evt) {
+        if(evt.originalTarget == evt.currentTarget && "Space" == evt.code) {
+            this.#actionPlayPause();
+        }
+    }
+
+    #actionPlayPause() {
+        let play = this.controls.querySelector(".meuuhdia_playpause");
+        let icon = play.querySelector("svg");
+        let label = play.querySelector(".sr-only");
+
+        if (this.video.paused || this.video.ended) {
+            this.video.play();
+            play.replaceChild(MeuuhdiaIcon.createIcon("pause"), icon);
+            label.textContent = "pause";
+            this.#toggleControls();
+        } else {
+            clearTimeout(this.controlsTimeout);
+            this.video.pause();
+            play.replaceChild(MeuuhdiaIcon.createIcon("play"), icon);
+            label.textContent = "lecture";
+        }
+    }
+
+    #toggleControls() {
+        clearTimeout(this.controlsTimeout);
+        this.wrapper.classList.remove("meuuhdia_hide_controls");
+        this.wrapper.removeEventListener("keydown", this.#toggleControls.bind(this), {once: true});
+        this.wrapper.removeEventListener("mousemove", this.#toggleControls.bind(this), {once: true});
+
+        if(this.video.paused) return;
+
+        this.wrapper.addEventListener("keydown", this.#toggleControls.bind(this), {once: true});
+        this.wrapper.addEventListener("mousemove", this.#toggleControls.bind(this), {once: true});
+
+        this.controlsTimeout = setTimeout(() => this.wrapper.classList.add("meuuhdia_hide_controls"), 5000);
+    }
+
+    /**
+     * ? Create button wrapped in list item
+     * 
+     * @param {string} btnClass 
+     * @param {Node} btnIcon 
+     * @param {string} btnLabel 
+     * @returns {Node} <li> element
+     */
+    #createButton(btnClass, btnIcon, btnLabel) {
+        let item = document.createElement("li");
+
+        let btn = document.createElement("button");
+        btn.classList.add(btnClass);
+        btn.setAttribute("type", "button");
+
+        let label = document.createElement("span");
+        label.textContent = btnLabel;
+        label.classList.add("sr-only");
+
+        btn.appendChild(label);
+        btn.appendChild(btnIcon);
+        item.appendChild(btn);
+
+        return item;
+    }
+
+    #createProgressDuration() {
+        /**
+         * ? Progress label
+         */
+        let progress_index = document.querySelectorAll(".meuuhdia_progress").length + 1;
+        let progress_label = document.createElement("label");
+        progress_label.setAttribute("for", "meuuhdia_progress_bar_" + progress_index);
+
+        let progress_duration = document.createElement("span");
+        progress_duration.classList.add("sr-only");
+        progress_duration.textContent = this.locale.controls.progress + ": ";
+
+        let progress_timenow = document.createElement("span");
+        progress_timenow.classList.add("meuuhdia_timenow");
+        MeuuhdiaTime.populateTimeNode(this.locale, progress_timenow, 0);
+
+        let progress_time_separator = document.createElement("span");
+        progress_time_separator.textContent = " / ";
+
+        let progress_timetotal = document.createElement("span");
+        progress_timetotal.classList.add("meuuhdia_timetotal");
+
+        progress_label.appendChild(progress_duration);
+        progress_label.appendChild(progress_timenow);
+        progress_label.appendChild(progress_time_separator);
+        progress_label.appendChild(progress_timetotal);
+
+        /**
+         * ? Progress bar
+         */
+        let progress_bar = document.createElement("input");
+        progress_bar.setAttribute("id", "meuuhdia_progress_bar_" + progress_index);
+        progress_bar.setAttribute("type", "range");
+        progress_bar.classList.add("meuuhdia_progress_bar", "meuuhdia_range_horizontal");
+        progress_bar.setAttribute("value", 0);
+        progress_bar.setAttribute("min", 0);
+
+        /**
+         * ? Progress item list
+         */
+        let item = document.createElement("li");
+        item.classList.add("meuuhdia_progress");
+        item.appendChild(progress_label);
+        item.appendChild(progress_bar);
+
+        return item;
+    }
+
+    #createProgressVolume() {
+        /**
+         * ? Volume off
+         */
+        let volContentOff = document.createElement("button");
+        volContentOff.setAttribute("type", "button");
+        volContentOff.setAttribute("aria-pressed", "false");
+        volContentOff.classList.add("meuuhdia_mute");
+
+        let volContentOffLabel = document.createElement("span");
+        volContentOffLabel.classList.add("sr-only");
+        volContentOffLabel.textContent = this.locale.controls.mute;
+
+        let volContentOffIcon = MeuuhdiaIcon.createIcon("volume_off");
+
+        volContentOff.appendChild(volContentOffLabel);
+        volContentOff.appendChild(volContentOffIcon);
+
+        /**
+         * ? Volume progress
+         */
+        let volProgress = document.createElement("input");
+        volProgress.setAttribute("type", "range");
+        volProgress.setAttribute("value", 1);
+        volProgress.setAttribute("min", 0);
+        volProgress.setAttribute("max", 1);
+        volProgress.setAttribute("step", 0.1);
+        volProgress.classList.add("meuuhdia_volume_bar", "meuuhdia_range_vertical");
+
+        let volume = meuuhdiaDisclosure.createDisclosure("volume", "volume_high", this.locale.controls.volume, [volContentOff, volProgress], "100%");
+        let progressLabel = volume.querySelector(".meuuhdia_disclosure_action").getAttribute("id");
+        volume.querySelector(".meuuhdia_volume_bar").setAttribute("aria-labelledby", progressLabel);
+
+        return volume;
+    }
+
+    #actionMute() {        
+        let mute_btn = this.controls.querySelector(".meuuhdia_mute");
+
+        this.video.muted = !this.video.muted;
+        mute_btn.setAttribute("aria-pressed", this.video.muted);
+
+        this.#setVolumeIcon();
+    }
+
+    #setVolumeIcon() {
+        let volume = this.controls.querySelector(".meuuhdia_volume_action")
+        let volume_icon = volume.querySelector("svg");
+        let newIcon = null;
+
+        if(this.video.muted) {
+            volume.replaceChild(MeuuhdiaIcon.createIcon("volume_off", "0%"), volume_icon);
+        } else {
+            switch(this.video.volume) {
+                case 0:
+                    newIcon = "volume_off";
+                    break;
+                case 0.1:
+                case 0.2:
+                case 0.3:
+                    newIcon = "volume_low";
+                    break;
+                case 0.4:
+                case 0.5:
+                case 0.6:
+                    newIcon = "volume_mid";
+                    break;
+                default:
+                    newIcon = "volume_high";
+            }
+
+            volume.replaceChild(MeuuhdiaIcon.createIcon(newIcon, this.video.volume * 100 + "%"), volume_icon);
+        }        
+    }
+
+    #timeProgress() {
+        let progress_container = this.controls.querySelector(".meuuhdia_progress");
+        let progress = progress_container.querySelector(".meuuhdia_progress_bar");
+        let timetotal_el = progress_container.querySelector(".meuuhdia_timetotal");
+        MeuuhdiaTime.populateTimeNode(this.locale, timetotal_el, this.video.duration);
+        
+        this.video.addEventListener("loadedmetadata", () => progress.setAttribute("max", this.video.duration));
+
+        this.video.addEventListener("timeupdate", () => {
+            if (!progress.hasAttribute("max")) progress.setAttribute("max", this.video.duration);
+
+            let duration_now = MeuuhdiaTime.convertSecondsToDuration(this.locale, this.video.currentTime);
+            
+            progress.value = this.video.currentTime;
+            progress_container.querySelector(".meuuhdia_timenow span[aria-hidden]").textContent = duration_now.text;
+            progress_container.querySelector(".meuuhdia_timenow .sr-only").textContent = duration_now.label;
+        });
+
+        progress.addEventListener("change", (evt) => this.video.currentTime = evt.currentTarget.value);
+    }
+
+    #fullscreen() {        
+        if (document.fullscreenElement !== null) {            
+            document.exitFullscreen();
+        } else {
+            this.wrapper.closest(".meuuhdia").requestFullscreen();
+        }
+    }
+
+    #setFullscreenData(state) {
+        let fs_btn = this.controls.querySelector(".meuuhdia_fs");
+        let fs_icon = fs_btn.querySelector("svg");
+        let icons = {
+            false: "expand",
+            true: "compress"
+        };
+
+        this.wrapper.closest(".meuuhdia").setAttribute("data-fullscreen", !!state);
+        fs_btn.setAttribute("aria-pressed", !!state);
+        fs_btn.replaceChild(MeuuhdiaIcon.createIcon(icons[state]), fs_icon);        
+    }
+}
+
+export { MeuuhdiaControls };

package/modules/disclosure.js

@@ -0,0 +1,99 @@
+import { MeuuhdiaIcon } from "./icon.js";
+
+export let meuuhdiaDisclosure = {
+    init: function() {
+        let disclosureActions = document.querySelectorAll(".meuuhdia_disclosure_action");
+
+        disclosureActions.forEach(btn => {
+            btn.addEventListener("click", meuuhdiaDisclosure.toggleDisclosure);
+            btn.closest(".meuuhdia_disclosure").addEventListener("focusout", meuuhdiaDisclosure.closeDisclosure);
+        });
+    },
+
+    /**
+     * ? Create disclosure component
+     * 
+     * @param {string} actionName 
+     * @param {string} actionIconName 
+     * @param {string} actionLabel 
+     * @param {Array<Node>} contentNodes 
+     * @param {?string} iconLabel 
+     * @returns {Node} <li> element
+     */
+    createDisclosure: function(actionName, actionIconName, actionLabel, contentNodes, iconLabel = null) {
+        let index = document.querySelectorAll("meuuhdia_disclosure").length + 1;
+
+        /**
+         * ? Action
+         */
+        let action = document.createElement("button");
+        action.setAttribute("id", "meuuhdia_disclosure_action-" + actionName + "-" + index);
+        action.setAttribute("type", "button");
+        action.setAttribute("aria-expanded", "false");
+        action.setAttribute("aria-controls", "meuuhdia_disclosure_content-" + actionName + "-" + index);
+        action.classList.add(`meuuhdia_${actionName}_action`, "meuuhdia_disclosure_action");
+
+        let actionLabelContainer = document.createElement("span");
+        actionLabelContainer.classList.add("sr-only");
+        actionLabelContainer.textContent = actionLabel;
+
+        let actionIcon = MeuuhdiaIcon.createIcon(actionIconName, iconLabel);
+
+        action.appendChild(actionLabelContainer);
+        action.appendChild(actionIcon);
+        action.addEventListener("click", meuuhdiaDisclosure.toggleDisclosure);
+
+        /**
+         * ? Content
+         */
+        let content = document.createElement("div");
+        content.setAttribute("id", "meuuhdia_disclosure_content-" + actionName + "-" + index);
+        content.classList.add("meuuhdia_disclosure_content", "meuuhdia_" + actionName + "_content");
+
+        contentNodes.forEach(el => content.appendChild(el));
+
+        /**
+         * ? Caption item
+         */
+        let item = document.createElement("li");
+        item.classList.add(`meuuhdia_${actionName}`, "meuuhdia_disclosure");
+
+        item.appendChild(action);
+        item.appendChild(content);
+        item.addEventListener("focusout", meuuhdiaDisclosure.closeDisclosure);
+
+        return item;
+    },
+
+    /**
+     * ? Toggle disclosure state
+     * @function toggleDisclosure
+     * @param {Event} evt 
+     * @returns {void}
+     */
+    toggleDisclosure: function(evt) {
+        let state = "false" == evt.currentTarget.getAttribute("aria-expanded");
+
+        evt.currentTarget.setAttribute("aria-expanded", state);
+        document.getElementById(evt.currentTarget.getAttribute("aria-controls")).style.display = state ? "inline-flex" : "none";
+    },
+
+    /**
+     * ? Close disclosure
+     * @function closeDisclosure
+     * @param {Event} evt 
+     * @returns {void}
+     */
+    closeDisclosure: function(evt) {
+        if(evt.relatedTarget) {
+            let inDisclosure = evt.relatedTarget.closest(".meuuhdia_disclosure") === evt.currentTarget.closest(".meuuhdia_disclosure");
+        
+            if(!inDisclosure) {
+                let disclosure = evt.target.closest(".meuuhdia_disclosure");
+                
+                disclosure.querySelector(".meuuhdia_disclosure_action").setAttribute("aria-expanded", "false");
+                disclosure.querySelector(".meuuhdia_disclosure_content").style.display = "none";
+            }
+        }        
+    }
+}

package/modules/icon.js

@@ -0,0 +1,32 @@
+import { icons } from "../icons.js";
+
+class MeuuhdiaIcon {
+    /**
+     * ? Create SVG icon
+     * 
+     * @param {string} name 
+     * @returns {Node} <svg> element
+     */
+    static createIcon(name, label = null) {
+        const xmlns = "http://www.w3.org/2000/svg";
+        let svg = document.createElementNS(xmlns, 'svg');
+        svg.setAttribute("xmlns", xmlns);   
+        svg.setAttribute("viewBox", "0 0 400 400");
+        
+        if(label) {
+            svg.setAttribute("aria-hidden", "false");
+            svg.setAttribute("aria-label", label);
+            svg.setAttribute("role", "img");
+        } else svg.setAttribute("aria-hidden", "true");        
+
+        let path = document.createElementNS(xmlns, "path");
+        path.setAttribute("d", icons[name]);
+        path.setAttribute("class", "meuuhdia_icon-path");
+
+        svg.appendChild(path);
+
+        return svg;
+    }
+}
+
+export { MeuuhdiaIcon };

package/modules/player.js

@@ -0,0 +1,95 @@
+import { MeuuhdiaControls } from "./controls.js";
+import { locale } from "../locale/fr.js";
+
+class MeuuhdiaPlayer {
+    /**
+     * @type {Boolean}
+     */
+    static #supportsVideo = !!document.createElement("video").canPlayType;
+
+    /**
+     * @type {Object}
+     */
+    locale;
+
+    /**
+     * @type {Boolean}
+     */
+    meuuhdiaIsInit = false;
+
+    /**
+     * @type {Node}
+     */
+    meuuhdia;
+
+    /**
+     * @type {Node}
+     */
+    wrapper;
+
+    /**
+     * @type {Node}
+     */
+    video;
+
+    /**
+     * @type {Node}
+     */
+    controls;
+
+    /**
+     * ? MeuuhdiaPlayer constructor
+     * 
+     * @param {Node} meuuhdia 
+     */
+    constructor(meuuhdia) {
+        this.meuuhdia = meuuhdia;
+        this.locale = locale;
+    }
+
+    /**
+     * ? Initialise player
+     * @returns {void}
+     */
+    initPlayer() {
+        let video_origin = this.meuuhdia ? this.meuuhdia.querySelector("video") : null;
+
+        if(MeuuhdiaPlayer.#supportsVideo && video_origin && 0 < video_origin.querySelectorAll("source").length) {
+            if(video_origin.readyState) {
+                if(!this.meuuhdiaIsInit) this.#createMeuuhdiaWrapper();
+                else this.#displayPlayer();
+            } else video_origin.addEventListener("loadeddata", this.initPlayer.bind(this));
+        }
+    }
+
+    /**
+     * ? Create player wrapper
+     * @private
+     * @returns {void}
+     */
+    #createMeuuhdiaWrapper() {
+        this.wrapper = this.meuuhdia.querySelector(".meuuhdia_wrapper");        
+        this.wrapper.setAttribute("lang", this.locale.code);
+
+        this.video = this.meuuhdia.querySelector("video");
+        this.video.querySelectorAll("track").forEach(track => track.id = track.getAttribute("kind") + "_" + track.getAttribute("srclang"));
+        
+        let Controls = new MeuuhdiaControls(this.locale, this.wrapper, this.video);
+        this.controls = Controls.controls;
+        
+        this.wrapper.appendChild(this.controls);
+
+        this.meuuhdiaIsInit = true;
+        this.#displayPlayer();
+    }
+
+    #displayPlayer() {
+        if(this.video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            this.video.controls = false;
+            this.wrapper.style.maxWidth = this.video.videoWidth + "px";
+            this.video.classList.add("meuuhdia_video");
+        } else this.video.addEventListener("loadeddata", this.#displayPlayer.bind(this));
+    }
+}
+
+export { MeuuhdiaPlayer };

package/modules/time.js

@@ -0,0 +1,64 @@
+class MeuuhdiaTime {
+    static populateTimeNode(locale, timeNode, seconds = null, duration_text = null) {
+        let duration = null !== seconds ? MeuuhdiaTime.convertSecondsToDuration(locale, seconds) : null;
+        let time_numeric = document.createElement("span");
+        time_numeric.setAttribute("aria-hidden", true);
+        time_numeric.textContent = duration ? duration.text : duration_text;
+        timeNode.appendChild(time_numeric);
+
+        let time_accname = document.createElement("span");
+        time_accname.classList.add("sr-only");
+        time_accname.textContent = duration ? duration.label : MeuuhdiaTime.getDurationLabel(locale, duration_text.split(":"));
+        timeNode.appendChild(time_accname);
+    }
+
+    static convertSecondsToDuration(locale, seconds) {
+        let slice = 3600 <= seconds ? 11 : 14;
+        let duration_ISO = new Date(Math.round(seconds) * 1000).toISOString();
+        let duration_text = duration_ISO.slice(slice, 19);
+        let duration_datetime = "PT" + duration_ISO.slice(11, 19);
+        let duration_label = MeuuhdiaTime.getDurationLabel(locale, duration_text.split(":"));
+
+        return {
+            text: duration_text,
+            label: duration_label,
+            datetime: duration_datetime
+        }
+    }
+
+    static getDurationLabel(locale, duration_obj) {
+        let response = "";
+
+        if(3 === duration_obj.length) {
+            let round = Math.round(duration_obj[0]);
+
+            if(0 < round) {
+                response += round + " " + (1 < round ? locale.datetime.hour.plur : locale.datetime.hour.sing) + ", ";
+            }
+        }
+
+        duration_obj.forEach((el, index) => {
+            let key = 0 === index ? "minute" : "second";
+            let round = Math.round(el);
+
+            response += round + " " + (1 < round ? locale.datetime[key].plur : locale.datetime[key].sing);
+
+            if(0 === index) response += ", ";
+        }, this);
+        
+        return response;
+    }
+
+    static convertTextToSeconds(duration_text) {
+        let timeObj = duration_text.split(":");
+
+        while(1 < timeObj.length) {
+            let add = parseInt(timeObj.shift()) * 60;
+            timeObj[0] = add + parseInt(timeObj[0]);
+        }
+
+        return timeObj[0];
+    }
+}
+
+export { MeuuhdiaTime };