vue-datocms 5.0.1 → 5.1.1-0

package/README.md

@@ -29,12 +29,14 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 [Components](https://vuejs.org/guide/essentials/component-basics.html):
 
 - [`<DatocmsImage />`](src/components/Image)
+- [`<DatocmsVideoPlayer />`](src/components/VideoPlayer)
 - [`<DatocmsStructuredText />`](src/components/StructuredText)
 
 [Composables](https://vuejs.org/guide/reusability/composables.html):
 
 - [`useQuerySubscription`](src/composables/useQuerySubscription)
 - [`useSiteSearch`](src/composables/useSiteSearch)
+- [`useVideoPlayer`](src/composables/useVideoPlayer)
 
 Helpers:
 

package/dist/index.cjs.js

@@ -10,6 +10,24 @@ var datocmsListen = require('datocms-listen');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var hypenateStyleName__default = /*#__PURE__*/_interopDefaultLegacy(hypenateStyleName);
 
 const isSsr = () => {
@@ -71,19 +89,19 @@ const Source = vue.defineComponent({
   }
 });
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -111,7 +129,7 @@ const Sizer = vue.defineComponent({
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"></svg>`;
     return () => vue.h("img", {
       class: sizerClass,
-      style: __spreadValues$3({
+      style: __spreadValues$5({
         display: "block",
         width: explicitWidth ? `${width}px` : "100%"
       }, sizerStyle),
@@ -121,25 +139,25 @@ const Sizer = vue.defineComponent({
   }
 });
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 const escape = (s) => {
   s = "" + s;
   s = s.replace(/&/g, "&amp;");
@@ -385,7 +403,7 @@ const Image = vue.defineComponent({
     return vue.h(
       "div",
       {
-        style: __spreadValues$2(__spreadValues$2({
+        style: __spreadValues$4(__spreadValues$4({
           display: this.explicitWidth ? "inline-block" : "block",
           overflow: "hidden"
         }, this.layout === "fill" ? absolutePositioning : this.layout === "intrinsic" ? { position: "relative", width: "100%", maxWidth: `${width}px` } : this.layout === "fixed" ? { position: "relative", width: `${width}px` } : { position: "relative" }), this.rootStyle),
@@ -405,7 +423,7 @@ const Image = vue.defineComponent({
             onLoad: this.handleLoad,
             ref: "imageRef",
             class: this.pictureClass,
-            style: __spreadValues$2(__spreadProps$2(__spreadValues$2({
+            style: __spreadValues$4(__spreadProps$3(__spreadValues$4({
               opacity: showImage ? 1 : 0,
               transition
             }, absolutePositioning), {
@@ -430,7 +448,7 @@ const Image = vue.defineComponent({
               alt: this.data.alt,
               title: this.data.title,
               class: this.pictureClass,
-              style: toCss(__spreadValues$2(__spreadValues$2({}, this.pictureStyle), absolutePositioning)),
+              style: toCss(__spreadValues$4(__spreadValues$4({}, this.pictureStyle), absolutePositioning)),
               loading: this.computedLazyLoad ? "lazy" : void 0,
               fetchpriority: this.priority ? "high" : void 0
             })
@@ -446,23 +464,23 @@ const DatocmsImagePlugin = {
   }
 };
 
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __objRest$1 = (source, exclude) => {
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const hAdapter = (tagName, props, childOrChildren) => {
-  const _a = props || {}; __objRest$1(_a, ["href", "target", "rel"]);
+  const _a = props || {}; __objRest$2(_a, ["href", "target", "rel"]);
   return vue.h(
     tagName,
     props,
@@ -623,6 +641,499 @@ const DatocmsStructuredTextPlugin = {
   }
 };
 
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+const computedTitle = (title) => {
+  return title ? { title } : void 0;
+};
+const computedPlaybackId = (muxPlaybackId, playbackId) => {
+  if (!(muxPlaybackId || playbackId))
+    return void 0;
+  return { playbackId: `${muxPlaybackId || playbackId}` };
+};
+const computedStyle = (width, height) => {
+  if (!(width && height))
+    return void 0;
+  return {
+    style: {
+      aspectRatio: `${width} / ${height}`
+    }
+  };
+};
+const computedPlaceholder = (blurUpThumb) => {
+  return blurUpThumb ? { placeholder: blurUpThumb } : void 0;
+};
+const useVideoPlayer = ({
+  data
+}) => {
+  const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } = data || {};
+  if (data === void 0)
+    return {};
+  return __spreadValues$3(__spreadValues$3(__spreadValues$3(__spreadValues$3({}, computedTitle(title) || {}), computedPlaybackId(muxPlaybackId, playbackId) || {}), computedStyle(width, height) || {}), computedPlaceholder(blurUpThumb) || {});
+};
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const isNil = (x) => x == void 0;
+const isKeyOf = (k, o) => {
+  if (isNil(o))
+    return false;
+  return k in o;
+};
+const PropToAttrNameMap = {
+  crossOrigin: "crossorigin",
+  viewBox: "viewBox",
+  playsInline: "playsinline",
+  autoPlay: "autoplay",
+  playbackRate: "playbackrate",
+  playbackRates: "playbackrates"
+};
+const toKebabCase = (string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+const toNativeAttrName = (propName, propValue) => {
+  if (typeof propValue === "boolean" && !propValue)
+    return void 0;
+  if (isKeyOf(propName, PropToAttrNameMap))
+    return PropToAttrNameMap[propName];
+  if (typeof propValue == void 0)
+    return void 0;
+  if (/[A-Z]/.test(propName))
+    return toKebabCase(propName);
+  return propName;
+};
+const toNativeAttrValue = (propValue, propName) => {
+  if (Array.isArray(propValue))
+    return propValue.join(" ");
+  if (typeof propValue === "boolean")
+    return propValue;
+  return propValue;
+};
+const toHTMLAttrs = (props = {}) => {
+  return Object.entries(props).reduce(
+    (transformedProps, [propName, propValue]) => {
+      const attrName = toNativeAttrName(propName, propValue);
+      if (!attrName) {
+        return transformedProps;
+      }
+      const attrValue = toNativeAttrValue(propValue);
+      if (attrValue === void 0) {
+        return transformedProps;
+      }
+      transformedProps[attrName] = attrValue;
+      return transformedProps;
+    },
+    {}
+  );
+};
+const VideoPlayer = vue.defineComponent({
+  name: "DatocmsVideoPlayer",
+  props: {
+    _hlsConfig: {
+      type: Object,
+      required: false
+    },
+    accentColor: {
+      type: String,
+      required: false
+    },
+    audio: {
+      type: Boolean,
+      required: false
+    },
+    autoPlay: {
+      type: [Boolean, String],
+      required: false
+    },
+    backwardSeekOffset: {
+      type: Number,
+      required: false
+    },
+    beaconCollectionDomain: {
+      type: String,
+      required: false
+    },
+    crossOrigin: {
+      type: String,
+      required: false
+    },
+    currentTime: {
+      type: Number,
+      required: false
+    },
+    customDomain: {
+      type: String,
+      required: false
+    },
+    data: {
+      type: Object,
+      required: false
+    },
+    debug: {
+      type: Boolean,
+      required: false
+    },
+    defaultDuration: {
+      type: Number,
+      required: false
+    },
+    defaultHiddenCaptions: {
+      type: Boolean,
+      required: false
+    },
+    defaultShowRemainingTime: {
+      type: Boolean,
+      required: false
+    },
+    defaultStreamType: {
+      type: String,
+      required: false
+    },
+    disableCookies: {
+      type: Boolean,
+      required: false,
+      default: () => true
+    },
+    disablePictureInPicture: {
+      type: Boolean,
+      required: false
+    },
+    envKey: {
+      type: String,
+      required: false
+    },
+    extraSourceParams: {
+      type: Object,
+      required: false
+    },
+    forwardSeekOffset: {
+      type: Number,
+      required: false
+    },
+    hotkeys: {
+      type: String,
+      required: false
+    },
+    loop: {
+      type: Boolean,
+      required: false
+    },
+    maxResolution: {
+      type: String,
+      required: false
+    },
+    metadata: {
+      type: Object,
+      required: false
+    },
+    metadataVideoId: {
+      type: String,
+      required: false
+    },
+    metadataVideoTitle: {
+      type: String,
+      required: false
+    },
+    metadataViewerUserId: {
+      type: String,
+      required: false
+    },
+    minResolution: {
+      type: String,
+      required: false
+    },
+    muted: {
+      type: Boolean,
+      required: false
+    },
+    nohotkeys: {
+      type: String,
+      required: false
+    },
+    noVolumePref: {
+      type: Boolean,
+      required: false
+    },
+    paused: {
+      type: Boolean,
+      required: false
+    },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    playbackId: {
+      type: String,
+      required: false
+    },
+    playbackRate: {
+      type: Number,
+      required: false
+    },
+    playbackRates: {
+      type: Array,
+      required: false
+    },
+    playerSoftwareName: {
+      type: String,
+      required: false
+    },
+    playerSoftwareVersion: {
+      type: String,
+      required: false
+    },
+    playsInline: {
+      type: Boolean,
+      required: false
+    },
+    poster: {
+      type: String,
+      required: false
+    },
+    preferCmcd: {
+      type: String,
+      required: false
+    },
+    preferPlayback: {
+      type: String,
+      required: false
+    },
+    preload: {
+      type: String,
+      required: false,
+      default: () => "metadata"
+    },
+    primaryColor: {
+      type: String,
+      required: false
+    },
+    renditionOrder: {
+      type: String,
+      required: false
+    },
+    secondaryColor: {
+      type: String,
+      required: false
+    },
+    src: {
+      type: String,
+      required: false
+    },
+    startTime: {
+      type: Number,
+      required: false
+    },
+    storyboardSrc: {
+      type: String,
+      required: false
+    },
+    streamType: {
+      type: String,
+      required: false
+    },
+    targetLiveWindow: {
+      type: Number,
+      required: false
+    },
+    theme: {
+      type: String,
+      required: false
+    },
+    themeProps: {
+      type: Object,
+      required: false
+    },
+    thumbnailTime: {
+      type: Number,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    tokens: {
+      type: Object,
+      required: false
+    },
+    volume: {
+      type: Number,
+      required: false
+    }
+  },
+  emits: [
+    "abort",
+    "canPlay",
+    "canPlayThrough",
+    "emptied",
+    "loadStart",
+    "loadedData",
+    "loadedMetadata",
+    "progress",
+    "durationChange",
+    "volumeChange",
+    "rateChange",
+    "resize",
+    "waiting",
+    "play",
+    "playing",
+    "timeUpdate",
+    "pause",
+    "seeking",
+    "seeked",
+    "stalled",
+    "suspend",
+    "ended",
+    "error",
+    "cuePointChange",
+    "cuePointsChange"
+  ],
+  setup: (_a) => {
+    var _b = _a, { data = {}, disableCookies = true, preload = "metadata" } = _b, otherProps = __objRest$1(_b, ["data", "disableCookies", "preload"]);
+    Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@mux/mux-player')); });
+    const muxPlayerRef = vue.ref();
+    const computedProps = __spreadProps$2(__spreadValues$2({}, useVideoPlayer({ data })), {
+      disableCookies,
+      preload
+    });
+    return {
+      muxPlayerRef,
+      computedProps,
+      otherProps
+    };
+  },
+  mounted() {
+    if (this.muxPlayerRef) {
+      this.muxPlayerRef.addEventListener("abort", (event) => {
+        this.$emit("abort", event);
+      });
+      this.muxPlayerRef.addEventListener("canplay", (event) => {
+        this.$emit("canPlay", event);
+      });
+      this.muxPlayerRef.addEventListener("canplaythrough", (event) => {
+        this.$emit("canPlayThrough", event);
+      });
+      this.muxPlayerRef.addEventListener("emptied", (event) => {
+        this.$emit("emptied", event);
+      });
+      this.muxPlayerRef.addEventListener("loadstart", (event) => {
+        this.$emit("loadStart", event);
+      });
+      this.muxPlayerRef.addEventListener("loadeddata", (event) => {
+        this.$emit("loadedData", event);
+      });
+      this.muxPlayerRef.addEventListener("loadedmetadata", (event) => {
+        this.$emit("loadedMetadata", event);
+      });
+      this.muxPlayerRef.addEventListener("progress", (event) => {
+        this.$emit("progress", event);
+      });
+      this.muxPlayerRef.addEventListener("durationchange", (event) => {
+        this.$emit("durationChange", event);
+      });
+      this.muxPlayerRef.addEventListener("volumechange", (event) => {
+        this.$emit("volumeChange", event);
+      });
+      this.muxPlayerRef.addEventListener("ratechange", (event) => {
+        this.$emit("rateChange", event);
+      });
+      this.muxPlayerRef.addEventListener("resize", (event) => {
+        this.$emit("resize", event);
+      });
+      this.muxPlayerRef.addEventListener("waiting", (event) => {
+        this.$emit("waiting", event);
+      });
+      this.muxPlayerRef.addEventListener("play", (event) => {
+        this.$emit("play", event);
+      });
+      this.muxPlayerRef.addEventListener("playing", (event) => {
+        this.$emit("playing", event);
+      });
+      this.muxPlayerRef.addEventListener("timeupdate", (event) => {
+        this.$emit("timeUpdate", event);
+      });
+      this.muxPlayerRef.addEventListener("pause", (event) => {
+        this.$emit("pause", event);
+      });
+      this.muxPlayerRef.addEventListener("seeking", (event) => {
+        this.$emit("seeking", event);
+      });
+      this.muxPlayerRef.addEventListener("seeked", (event) => {
+        this.$emit("seeked", event);
+      });
+      this.muxPlayerRef.addEventListener("stalled", (event) => {
+        this.$emit("stalled", event);
+      });
+      this.muxPlayerRef.addEventListener("suspend", (event) => {
+        this.$emit("suspend", event);
+      });
+      this.muxPlayerRef.addEventListener("ended", (event) => {
+        this.$emit("ended", event);
+      });
+      this.muxPlayerRef.addEventListener("error", (event) => {
+        this.$emit("error", event);
+      });
+      this.muxPlayerRef.addEventListener("cuepointchange", (event) => {
+        this.$emit("cuePointChange", event);
+      });
+      this.muxPlayerRef.addEventListener("cuepointschange", (event) => {
+        this.$emit("cuePointsChange", event);
+      });
+    }
+  },
+  render() {
+    return vue.h("mux-player", __spreadValues$2(__spreadValues$2({
+      ref: "muxPlayerRef",
+      "stream-type": "on-demand"
+    }, toHTMLAttrs(this.computedProps)), toHTMLAttrs(this.otherProps)));
+  }
+});
+const DatocmsVideoPlayerPlugin = {
+  install: (Vue) => {
+    Vue.component("DatocmsVideoPlayer", VideoPlayer);
+  }
+};
+
 var __defProp$1 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -874,10 +1385,17 @@ Object.defineProperty(exports, 'RenderError', {
 });
 exports.DatocmsImagePlugin = DatocmsImagePlugin;
 exports.DatocmsStructuredTextPlugin = DatocmsStructuredTextPlugin;
+exports.DatocmsVideoPlayerPlugin = DatocmsVideoPlayerPlugin;
 exports.Image = Image;
 exports.StructuredText = StructuredText;
+exports.VideoPlayer = VideoPlayer;
 exports.appendKeyToValidElement = appendKeyToValidElement;
 exports.defaultAdapter = defaultAdapter;
+exports.isKeyOf = isKeyOf;
+exports.isNil = isNil;
 exports.toHead = toHead;
+exports.toNativeAttrName = toNativeAttrName;
+exports.toNativeAttrValue = toNativeAttrValue;
 exports.useQuerySubscription = useQuerySubscription;
 exports.useSiteSearch = useSiteSearch;
+exports.useVideoPlayer = useVideoPlayer;