@tailor-cms/ce-brightcove-video-display 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Content element `Display` component

package/dist/index.cjs

@@ -0,0 +1,257 @@
+"use strict";
+var import_index = require("./index.css");
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+var type = "BRIGHTCOVE_VIDEO";
+var name = "Brightcove Video";
+var initState = () => ({});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-video",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: false
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui
+};
+var index_default = manifest$1;
+function normalize(strArray) {
+  var resultArray = [];
+  if (strArray.length === 0) {
+    return "";
+  }
+  if (typeof strArray[0] !== "string") {
+    throw new TypeError("Url must be a string. Received " + strArray[0]);
+  }
+  if (strArray[0].match(/^[^/:]+:\/*$/) && strArray.length > 1) {
+    var first = strArray.shift();
+    strArray[0] = first + strArray[0];
+  }
+  if (strArray[0].match(/^file:\/\/\//)) {
+    strArray[0] = strArray[0].replace(/^([^/:]+):\/*/, "$1:///");
+  } else {
+    strArray[0] = strArray[0].replace(/^([^/:]+):\/*/, "$1://");
+  }
+  for (var i = 0; i < strArray.length; i++) {
+    var component = strArray[i];
+    if (typeof component !== "string") {
+      throw new TypeError("Url must be a string. Received " + component);
+    }
+    if (component === "") {
+      continue;
+    }
+    if (i > 0) {
+      component = component.replace(/^[\/]+/, "");
+    }
+    if (i < strArray.length - 1) {
+      component = component.replace(/[\/]+$/, "");
+    } else {
+      component = component.replace(/[\/]+$/, "/");
+    }
+    resultArray.push(component);
+  }
+  var str = resultArray.join("/");
+  str = str.replace(/\/(\?|&|#[^!])/g, "$1");
+  var parts = str.split("?");
+  str = parts.shift() + (parts.length > 0 ? "?" : "") + parts.join("&");
+  return str;
+}
+function urlJoin() {
+  var input;
+  if (typeof arguments[0] === "object") {
+    input = arguments[0];
+  } else {
+    input = [].slice.call(arguments);
+  }
+  return normalize(input);
+}
+const _hoisted_1$1 = { class: "brightcove-player" };
+const BASE_URL = "//players.brightcove.net/";
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "BrightcovePlayer",
+  props: {
+    accountId: {},
+    playerId: {},
+    videoId: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const BrightcoveErrorCode = {
+      NOT_FOUND: "VIDEO_CLOUD_ERR_VIDEO_NOT_FOUND",
+      INVALID_CONFIG: "ERR_INVALID_CONFIGURATION"
+    };
+    const props = __props;
+    const error = vue.ref(null);
+    const style = vue.ref(null);
+    const script = vue.ref(null);
+    const player = vue.ref(null);
+    const playerUrl = vue.computed(
+      () => urlJoin(BASE_URL, props.accountId, `${props.playerId}_default`, "index.min.js")
+    );
+    const showError = vue.computed(() => {
+      if (!error.value) return false;
+      const code = error.value.code;
+      return code === BrightcoveErrorCode.NOT_FOUND || code === BrightcoveErrorCode.INVALID_CONFIG;
+    });
+    const createPlayer = () => {
+      const video = document.createElement("video");
+      Object.assign(video.dataset, {
+        account: props.accountId,
+        player: props.playerId,
+        videoId: props.videoId
+      });
+      video.className = "video-js";
+      video.setAttribute("controls", "");
+      return video;
+    };
+    const destroyPlayer = () => {
+      if (player.value) {
+        player.value.pause();
+        player.value.dispose();
+        player.value = null;
+      }
+      error.value = null;
+      if (script.value) document.body.removeChild(script.value);
+      script.value = null;
+      if (style.value) document.head.removeChild(style.value);
+      style.value = null;
+      if (videoWrapper.value) videoWrapper.value.innerHTML = "";
+    };
+    const initPlayer = (url = playerUrl.value) => {
+      destroyPlayer();
+      script.value = loadScript(url, document.body, (err) => {
+        var _a;
+        if (err) {
+          onError({
+            code: BrightcoveErrorCode.INVALID_CONFIG,
+            accountId: props.accountId,
+            playerId: props.playerId
+          });
+          return;
+        }
+        style.value = setTheme();
+        const video = createPlayer();
+        (_a = videoWrapper.value) == null ? void 0 : _a.appendChild(video);
+        player.value = window.bc(video);
+        player.value.autoplay(false);
+        player.value.on("error", () => onError(player.value.error()));
+      });
+    };
+    const setTheme = () => {
+      const cls = `bc-style-${props.playerId}-default`;
+      const theme = document.head.getElementsByClassName(cls)[0];
+      return document.head.insertBefore(theme, null);
+    };
+    const pause = () => {
+      if (player.value) player.value.pause();
+    };
+    const onError = (err) => {
+      error.value = err;
+    };
+    vue.watch(playerUrl, () => {
+      if (!videoWrapper.value) return;
+      initPlayer();
+    });
+    vue.watch(
+      () => props.videoId,
+      () => {
+        if (!videoWrapper.value) return;
+        initPlayer();
+      }
+    );
+    vue.onMounted(() => {
+      initPlayer();
+    });
+    vue.onBeforeUnmount(() => {
+      destroyPlayer();
+    });
+    const videoWrapper = vue.ref(null);
+    function loadScript(url, dest, cb) {
+      const script2 = document.createElement("script");
+      script2.src = url;
+      script2.async = false;
+      script2.onload = () => cb(null, script2);
+      script2.onerror = () => cb(new Error("Error loading script!"), script2);
+      return dest.appendChild(script2);
+    }
+    __expose({
+      pause
+    });
+    return (_ctx, _cache) => {
+      const _component_VIcon = vue.resolveComponent("VIcon");
+      const _component_VSheet = vue.resolveComponent("VSheet");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        showError.value ? (vue.openBlock(), vue.createBlock(_component_VSheet, {
+          key: 0,
+          class: "h-100 d-flex flex-column align-center justify-center opacity-90",
+          color: "black"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_VIcon, {
+              class: "mb-2",
+              icon: "mdi-alert",
+              size: "42"
+            }),
+            _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "text-h6" }, "Error loading media!", -1))
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("", true),
+        vue.withDirectives(vue.createElementVNode("div", {
+          ref_key: "videoWrapper",
+          ref: videoWrapper,
+          class: "wrapper"
+        }, null, 512), [
+          [vue.vShow, !showError.value]
+        ])
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const BrightcovePlayer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-dd41e47c"]]);
+const _hoisted_1 = { class: "tce-root" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  emits: ["interaction"],
+  setup(__props) {
+    const props = __props;
+    const isConfigured = vue.computed(
+      () => props.data.accountId && props.data.playerId && props.data.videoId
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        isConfigured.value ? (vue.openBlock(), vue.createBlock(BrightcovePlayer, {
+          key: 0,
+          ref: "player",
+          "account-id": _ctx.data.accountId,
+          "player-id": _ctx.data.playerId,
+          "video-id": _ctx.data.videoId,
+          class: "player"
+        }, null, 8, ["account-id", "player-id", "video-id"])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const Display = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5cbb7746"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+exports.Display = Display;
+exports.default = manifest;

package/dist/index.css

@@ -0,0 +1,9 @@
+.brightcove-player[data-v-dd41e47c],
+.brightcove-player[data-v-dd41e47c] .video-js {
+  width: 100%;
+  height: 360px;
+}
+.tce-root[data-v-5cbb7746] {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+}

package/dist/index.js

@@ -0,0 +1,257 @@
+import "./index.css";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, resolveComponent, createElementBlock, openBlock, createBlock, createCommentVNode, withDirectives, withCtx, createVNode, createElementVNode, vShow } from "vue";
+var type = "BRIGHTCOVE_VIDEO";
+var name = "Brightcove Video";
+var initState = () => ({});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-video",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: false
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui
+};
+var index_default = manifest$1;
+function normalize(strArray) {
+  var resultArray = [];
+  if (strArray.length === 0) {
+    return "";
+  }
+  if (typeof strArray[0] !== "string") {
+    throw new TypeError("Url must be a string. Received " + strArray[0]);
+  }
+  if (strArray[0].match(/^[^/:]+:\/*$/) && strArray.length > 1) {
+    var first = strArray.shift();
+    strArray[0] = first + strArray[0];
+  }
+  if (strArray[0].match(/^file:\/\/\//)) {
+    strArray[0] = strArray[0].replace(/^([^/:]+):\/*/, "$1:///");
+  } else {
+    strArray[0] = strArray[0].replace(/^([^/:]+):\/*/, "$1://");
+  }
+  for (var i = 0; i < strArray.length; i++) {
+    var component = strArray[i];
+    if (typeof component !== "string") {
+      throw new TypeError("Url must be a string. Received " + component);
+    }
+    if (component === "") {
+      continue;
+    }
+    if (i > 0) {
+      component = component.replace(/^[\/]+/, "");
+    }
+    if (i < strArray.length - 1) {
+      component = component.replace(/[\/]+$/, "");
+    } else {
+      component = component.replace(/[\/]+$/, "/");
+    }
+    resultArray.push(component);
+  }
+  var str = resultArray.join("/");
+  str = str.replace(/\/(\?|&|#[^!])/g, "$1");
+  var parts = str.split("?");
+  str = parts.shift() + (parts.length > 0 ? "?" : "") + parts.join("&");
+  return str;
+}
+function urlJoin() {
+  var input;
+  if (typeof arguments[0] === "object") {
+    input = arguments[0];
+  } else {
+    input = [].slice.call(arguments);
+  }
+  return normalize(input);
+}
+const _hoisted_1$1 = { class: "brightcove-player" };
+const BASE_URL = "//players.brightcove.net/";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "BrightcovePlayer",
+  props: {
+    accountId: {},
+    playerId: {},
+    videoId: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const BrightcoveErrorCode = {
+      NOT_FOUND: "VIDEO_CLOUD_ERR_VIDEO_NOT_FOUND",
+      INVALID_CONFIG: "ERR_INVALID_CONFIGURATION"
+    };
+    const props = __props;
+    const error = ref(null);
+    const style = ref(null);
+    const script = ref(null);
+    const player = ref(null);
+    const playerUrl = computed(
+      () => urlJoin(BASE_URL, props.accountId, `${props.playerId}_default`, "index.min.js")
+    );
+    const showError = computed(() => {
+      if (!error.value) return false;
+      const code = error.value.code;
+      return code === BrightcoveErrorCode.NOT_FOUND || code === BrightcoveErrorCode.INVALID_CONFIG;
+    });
+    const createPlayer = () => {
+      const video = document.createElement("video");
+      Object.assign(video.dataset, {
+        account: props.accountId,
+        player: props.playerId,
+        videoId: props.videoId
+      });
+      video.className = "video-js";
+      video.setAttribute("controls", "");
+      return video;
+    };
+    const destroyPlayer = () => {
+      if (player.value) {
+        player.value.pause();
+        player.value.dispose();
+        player.value = null;
+      }
+      error.value = null;
+      if (script.value) document.body.removeChild(script.value);
+      script.value = null;
+      if (style.value) document.head.removeChild(style.value);
+      style.value = null;
+      if (videoWrapper.value) videoWrapper.value.innerHTML = "";
+    };
+    const initPlayer = (url = playerUrl.value) => {
+      destroyPlayer();
+      script.value = loadScript(url, document.body, (err) => {
+        var _a;
+        if (err) {
+          onError({
+            code: BrightcoveErrorCode.INVALID_CONFIG,
+            accountId: props.accountId,
+            playerId: props.playerId
+          });
+          return;
+        }
+        style.value = setTheme();
+        const video = createPlayer();
+        (_a = videoWrapper.value) == null ? void 0 : _a.appendChild(video);
+        player.value = window.bc(video);
+        player.value.autoplay(false);
+        player.value.on("error", () => onError(player.value.error()));
+      });
+    };
+    const setTheme = () => {
+      const cls = `bc-style-${props.playerId}-default`;
+      const theme = document.head.getElementsByClassName(cls)[0];
+      return document.head.insertBefore(theme, null);
+    };
+    const pause = () => {
+      if (player.value) player.value.pause();
+    };
+    const onError = (err) => {
+      error.value = err;
+    };
+    watch(playerUrl, () => {
+      if (!videoWrapper.value) return;
+      initPlayer();
+    });
+    watch(
+      () => props.videoId,
+      () => {
+        if (!videoWrapper.value) return;
+        initPlayer();
+      }
+    );
+    onMounted(() => {
+      initPlayer();
+    });
+    onBeforeUnmount(() => {
+      destroyPlayer();
+    });
+    const videoWrapper = ref(null);
+    function loadScript(url, dest, cb) {
+      const script2 = document.createElement("script");
+      script2.src = url;
+      script2.async = false;
+      script2.onload = () => cb(null, script2);
+      script2.onerror = () => cb(new Error("Error loading script!"), script2);
+      return dest.appendChild(script2);
+    }
+    __expose({
+      pause
+    });
+    return (_ctx, _cache) => {
+      const _component_VIcon = resolveComponent("VIcon");
+      const _component_VSheet = resolveComponent("VSheet");
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        showError.value ? (openBlock(), createBlock(_component_VSheet, {
+          key: 0,
+          class: "h-100 d-flex flex-column align-center justify-center opacity-90",
+          color: "black"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_VIcon, {
+              class: "mb-2",
+              icon: "mdi-alert",
+              size: "42"
+            }),
+            _cache[0] || (_cache[0] = createElementVNode("div", { class: "text-h6" }, "Error loading media!", -1))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        withDirectives(createElementVNode("div", {
+          ref_key: "videoWrapper",
+          ref: videoWrapper,
+          class: "wrapper"
+        }, null, 512), [
+          [vShow, !showError.value]
+        ])
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const BrightcovePlayer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-dd41e47c"]]);
+const _hoisted_1 = { class: "tce-root" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  emits: ["interaction"],
+  setup(__props) {
+    const props = __props;
+    const isConfigured = computed(
+      () => props.data.accountId && props.data.playerId && props.data.videoId
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        isConfigured.value ? (openBlock(), createBlock(BrightcovePlayer, {
+          key: 0,
+          ref: "player",
+          "account-id": _ctx.data.accountId,
+          "player-id": _ctx.data.playerId,
+          "video-id": _ctx.data.videoId,
+          class: "player"
+        }, null, 8, ["account-id", "player-id", "video-id"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const Display = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5cbb7746"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+export {
+  Display,
+  manifest as default
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@tailor-cms/ce-brightcove-video-display",
+  "description": "Tailor CMS Brightcove video end-user component",
+  "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@tailor-cms/eslint-config": "0.0.2",
+    "@types/lodash": "^4.17.12",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vue-tsc": "^2.2.0",
+    "@tailor-cms/ce-brightcove-video-manifest": "0.0.1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "url-join": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc --noEmit && vite build",
+    "lint": "eslint --ext .js,.ts,.vue ./src",
+    "lint:fix": "pnpm lint --fix"
+  }
+}