@vnejs/plugins.core.media 0.0.1

package/const/const.js

@@ -0,0 +1,9 @@
+export const TYPES = { IMAGE: "image", AUDIO: "audio", VIDEO: "video" };
+
+export const CONSTRUCTORS = {
+  [TYPES.IMAGE]: Image,
+  [TYPES.AUDIO]: Audio,
+  [TYPES.VIDEO]: HTMLVideoElement,
+};
+
+export const PRIORITIES = { HIGH: 0, MEDIUM: 1, LOW: 2, BACKGROUND: 3 };

package/const/events.js

@@ -0,0 +1,9 @@
+export const SUBSCRIBE_EVENTS = {
+  GET: "vne:media:get",
+  SET: "vne:media:set",
+  GIF: "vne:media:gif",
+  LOAD: "vne:media:load",
+  LOAD_CHECK: "vne:media:load_check",
+  MEMORY_GET: "vne:media:memory_get",
+  MEMORY_SET: "vne:media:memory_set",
+};

package/index.js

@@ -0,0 +1,11 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+
+import { MediaGif } from "./modules/gif";
+import { MediaLoad } from "./modules/load";
+import { Media } from "./modules/media";
+import { MediaMemory } from "./modules/memory";
+
+regPlugin("MEDIA", { constants, events: SUBSCRIBE_EVENTS }, [MediaGif, MediaLoad, Media, MediaMemory]);

package/modules/gif.js

@@ -0,0 +1,30 @@
+import decodeGif from "decode-gif";
+
+import { Module } from "@vnejs/module";
+
+export class MediaGif extends Module {
+  name = "media.gif";
+
+  subscribe = () => {
+    this.on(this.EVENTS.MEDIA.GIF, this.onMediaGif);
+  };
+
+  onMediaGif = ({ media, mediaId, ab, isConstant, isTmp } = {}) => {
+    const { width, height, frames } = decodeGif(new Uint8Array(ab));
+
+    media.setAttribute("frames", frames.length);
+    media.setAttribute("delay", frames[1].timeCode);
+
+    return Promise.all(this.createFrameFunc(mediaId, width, height, isConstant, isTmp));
+  };
+
+  createFrameFunc = (mediaId, width, height, isConstant, isTmp) => (frame, i) => {
+    const media = document.createElement("canvas");
+    media.width = width;
+    media.height = height;
+    media.getContext("2d").putImageData(new ImageData(frame.data, width, height), 0, 0);
+    media.setAttribute("parentId", mediaId);
+
+    return this.emit(this.EVENTS.MEDIA.SET, { media, mediaId: `${mediaId}.frame.${i}`, isConstant, isTmp });
+  };
+}

package/modules/load.js

@@ -0,0 +1,96 @@
+import { Semaphore } from "@vnejs/semaphore";
+import { Module } from "@vnejs/module";
+
+import { createMediaId } from "./utils";
+
+export class MediaLoad extends Module {
+  name = "media.load";
+
+  inProcess = {};
+
+  subscribe = () => {
+    this.on(this.EVENTS.MEDIA.LOAD, this.onMediaLoad);
+    this.on(this.EVENTS.MEDIA.LOAD_CHECK, this.onMediaLoadCheck);
+  };
+
+  init = ({ platform = this.CONST.PLATFORMS.WEB } = {}) => {
+    this.semaphore = new Semaphore(platform === this.CONST.PLATFORMS.WEB ? 8 : 4);
+    this.shared.mediaNoTimeoutSources = platform === this.CONST.PLATFORMS.WEB ? ["web"] : [];
+  };
+
+  onMediaLoad = async ({ type, name, isConstant = false, isTmp = false, ...otherArgs } = {}) => {
+    if (!this.isReady) await this.waitIsReady();
+
+    const { mediaType, postfix, quality = "original", priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND } = otherArgs;
+
+    const src = this.media[mediaType] && this.media[mediaType][`${quality}/${name}`];
+    const mediaId = createMediaId(type, mediaType, quality, name, postfix);
+
+    if (!src) {
+      const errorArgs = [type, name, mediaType, `${quality}/${name}`, this.media[mediaType], mediaId, src];
+      console.error(`No media src on preload:`, ...errorArgs);
+      return;
+    }
+
+    const oldMedia = await this.emitOne(this.EVENTS.MEDIA.LOAD_CHECK, { mediaId });
+    if (oldMedia) return oldMedia;
+
+    await this.semaphore.push(mediaId, priority, this.getPromise(mediaId, type, src, priority, isConstant, isTmp));
+
+    return this.emitOne(this.EVENTS.MEDIA.MEMORY_GET, { mediaId });
+  };
+
+  onMediaLoadCheck = async (mediaId) => {
+    if (this.inProcess[mediaId]) return this.inProcess[mediaId];
+
+    const oldMedia = await this.emitOne(this.EVENTS.MEDIA.MEMORY_GET, { mediaId });
+    if (oldMedia) return oldMedia;
+
+    if (this.inProcess[mediaId]) return this.inProcess[mediaId];
+  };
+
+  getPromise =
+    (mediaId, type, src, priority, isConstant = false, isTmp = false) =>
+    async () => {
+      const oldMedia = await this.emitOne(this.EVENTS.MEDIA.LOAD_CHECK, { mediaId });
+      if (oldMedia) return oldMedia;
+
+      this.inProcess[mediaId] = this.loadMedia(mediaId, type, src, priority, isConstant, isTmp);
+      const media = await this.inProcess[mediaId];
+      delete this.inProcess[mediaId];
+
+      return media;
+    };
+
+  loadMedia = async (mediaId, type, src, priority, isConstant = false, isTmp = false) => {
+    this.log({ action: "load start", mediaId, type, priority, isConstant, isTmp });
+
+    const ts = Math.round(new Date().getTime() / 1000 / 60 / 60);
+    const mediaSrc = `${src}?ts=${ts}&version=${this.options?.global?.version || 0}`;
+    const splitSrc = src.split(".");
+    const ext = splitSrc[splitSrc.length - 1];
+    const mediaRequest = await fetch(mediaSrc);
+    const media =
+      type === this.CONST.MEDIA.TYPES.VIDEO
+        ? document.createElement("video")
+        : new this.CONST.MEDIA.CONSTRUCTORS[type]();
+    media.setAttribute("ext", ext);
+    media.setAttribute("type", type);
+    // IOS - mediaSrc
+    media.src = URL.createObjectURL(await mediaRequest.clone().blob());
+
+    if (ext === "gif") {
+      const ab = await mediaRequest.clone().arrayBuffer();
+      await this.emit(this.EVENTS.MEDIA.GIF, { media, mediaId, ab, isConstant, isTmp });
+    }
+
+    await this.emit(this.EVENTS.MEDIA.SET, { media, mediaId, isConstant, isTmp });
+
+    if (priority && !this.shared.mediaNoTimeoutSources.length)
+      await this.waitTimeout(Math.round(25 * priority * (Math.random() + 0.618)));
+
+    this.log({ action: "load end", mediaId, type, priority, isConstant, isTmp });
+
+    return media;
+  };
+}

package/modules/media.js

@@ -0,0 +1,45 @@
+import { Module } from "@vnejs/module";
+
+import { createMediaId } from "./utils";
+
+export class Media extends Module {
+  name = "media";
+
+  subscribe = () => {
+    this.on(this.EVENTS.MEDIA.GET, this.onMediaGet);
+    this.on(this.EVENTS.MEDIA.SET, this.onMediaSet);
+  };
+
+  onMediaGet = async ({ type, name, mediaType, postfix, quality = "original" } = {}) => {
+    if (!this.isReady) await this.waitIsReady();
+
+    const realMediaId = type && name && mediaType && createMediaId(type, mediaType, quality, name, postfix);
+
+    if (!realMediaId) return null;
+
+    const media =
+      (await this.emitOne(this.EVENTS.MEDIA.MEMORY_GET, { mediaId: realMediaId })) ||
+      (await this.loadMedia(type, name, mediaType, quality, postfix));
+
+    return this.prepareMedia(media);
+  };
+
+  onMediaSet = async ({ mediaId, media, isConstant, isTmp } = {}) =>
+    this.emit(this.EVENTS.MEDIA.MEMORY_SET, { mediaId, media, isConstant, isTmp });
+
+  loadMedia = (type, name, mediaType, quality, postfix) => {
+    const priority = this.CONST.MEDIA.PRIORITIES.HIGH;
+
+    return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, name, mediaType, quality, postfix, priority });
+  };
+
+  prepareMedia = async (media) => {
+    const mediaType = media.getAttribute("type");
+
+    if (mediaType === this.CONST.MEDIA.TYPES.AUDIO || mediaType === this.CONST.MEDIA.TYPES.VIDEO)
+      while (!media.duration || media.readyState !== 4) await this.waitRerender();
+    if (mediaType === this.CONST.MEDIA.TYPES.IMAGE) while (!media.width || !media.complete) await this.waitRerender();
+
+    return media;
+  };
+}

package/modules/memory.js

@@ -0,0 +1,46 @@
+import { Module } from "@vnejs/module";
+
+export class MediaMemory extends Module {
+  name = "media.memory";
+
+  subscribe = () => {
+    this.on(this.EVENTS.MEDIA.MEMORY_GET, this.onMemoryGet);
+    this.on(this.EVENTS.MEDIA.MEMORY_SET, this.onMemorySet);
+  };
+
+  init = () => {
+    this.elem = document.createElement("div");
+    this.elem.id = "media";
+    this.elem.style.display = "none";
+    this.elem.style.position = "fixed";
+
+    document.getElementById("app").appendChild(this.elem);
+
+    const eventArgs = { module: this.name, onClear: this.onClear, onAdd: this.onAdd, onRestore: this.onRestore };
+
+    return this.emit(this.EVENTS.MEMORY.REG, eventArgs);
+  };
+
+  onAdd = async (key, value) => {
+    this.elem.appendChild(value);
+    value.id = key;
+    while (!document.getElementById(key)) await this.waitRerender();
+    await this.waitRerender();
+    return value;
+  };
+  onClear = (key, memory, func) => {
+    const value = document.getElementById(key);
+    value.src && URL.revokeObjectURL(value.src);
+    value.remove();
+
+    return Promise.all(this.getPromises(key, memory, func));
+  };
+  onRestore = (key, memory, func) => Promise.all(this.getPromises(key, memory, func));
+
+  onMemorySet = async ({ media, mediaId, isConstant, isTmp } = {}) =>
+    this.emit(this.EVENTS.MEMORY.SET, { module: this.name, key: mediaId, value: media, isConstant, isTmp });
+  onMemoryGet = ({ mediaId }) => this.emitOne(this.EVENTS.MEMORY.GET, { module: this.name, key: mediaId });
+
+  getPromises = (key, memory, func) =>
+    [...document.querySelectorAll(`[parentId="${key}"]`)].map((children) => func(memory, children.id));
+}

package/modules/utils.js

@@ -0,0 +1,2 @@
+export const createMediaId = (type, mediaType, quality, name, postfix) =>
+  `media/${type}/${mediaType}/${quality}/${name}${postfix || ""}`;

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@vnejs/plugins.core.media",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major": "npm version major && npm publish --access public",
+    "publish:minor": "npm version minor && npm publish --access public",
+    "publish:patch": "npm version patch && npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "decode-gif": "1.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/shared": "*",
+    "@vnejs/module": "*",
+    "@vnejs/semaphore": "*"
+  }
+}