@cling-se/widget 0.17.3 → 0.18.0

package/dist/VideoPlayerSettings-Dg1OxjOa.js

@@ -0,0 +1,78 @@
+import v from "./VideoPlayerInput-DBxcTUb7.js";
+import { _ as m, e as u, o as i, b as a, s as e, v as s, d as z, F as _, k as h, n as f } from "./main-Bn5XkQPb.js";
+const g = {
+  i18nOptions: {
+    namespaces: "components",
+    keyPrefix: "document.videoPlayer"
+  },
+  name: "VideoPlayerSettings",
+  components: {
+    VideoPlayerInput: v
+  },
+  emits: ["input"],
+  props: {
+    video: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: "small"
+    }
+  },
+  computed: {
+    sizeOptions() {
+      return [
+        {
+          value: "small",
+          svg: '<g fill-rule="nonzero" fill="none"><path d="M0 0h99v65H0z"/><path d="M22 16h56a2 2 0 012 2v30a2 2 0 01-2 2H22a2 2 0 01-2-2V18a2 2 0 012-2zm0 40h56a2 2 0 012 2v7H20v-7a2 2 0 012-2zM20 0h60v7a2 2 0 01-2 2H22a2 2 0 01-2-2V0z" fill="currentColor"/></g>'
+        },
+        {
+          value: "medium",
+          svg: '<g fill-rule="nonzero" fill="none"><path d="M0 0h99v65H0z"/><path d="M11 14h76a2 2 0 012 2v33a2 2 0 01-2 2H11a2 2 0 01-2-2V16a2 2 0 012-2zm8-14h60v6a2 2 0 01-2 2H21a2 2 0 01-2-2V0zm2 58h56a2 2 0 012 2v5H19v-5a2 2 0 012-2z" fill="currentColor"/></g>'
+        },
+        {
+          value: "large",
+          svg: '<g fill-rule="nonzero" fill="none"><path d="M0 0h99v65H0z"/><path d="M8 7h84a2 2 0 012 2v42a2 2 0 01-2 2H8a2 2 0 01-2-2V9a2 2 0 012-2zm13 51h56a2 2 0 012 2v5H19v-5a2 2 0 012-2z" fill="currentColor"/></g>'
+        }
+      ];
+    }
+  }
+}, y = { class: "d-root" }, H = { class: "d-option" }, V = { class: "d-option-title" }, k = {
+  class: "text-gray-600",
+  style: { "padding-bottom": "1em", "font-size": "15px" }
+}, M = { class: "d-option" }, C = { class: "d-option-title" }, P = { style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap" } }, $ = ["onClick"], w = ["innerHTML"];
+function x(o, n, l, b, B, d) {
+  const r = u("VideoPlayerInput");
+  return i(), a("div", y, [
+    e("div", H, [
+      e("div", V, s(o.$t("_common:video").capitalize()), 1),
+      e("div", k, s(o.$t("subTitle")), 1),
+      z(r, {
+        "model-value": l.video,
+        "is-drawer-mode": !0,
+        "onUpdate:modelValue": n[0] || (n[0] = (t) => o.$emit("input", { key: "video", value: t }))
+      }, null, 8, ["model-value"])
+    ]),
+    e("div", M, [
+      e("div", C, s(o.$t("_common:size").capitalize()), 1),
+      e("div", P, [
+        (i(!0), a(_, null, h(d.sizeOptions, ({ value: t, svg: p }, c) => (i(), a("div", {
+          key: c,
+          class: "size-option",
+          onClick: (I) => o.$emit("input", { key: "size", value: t })
+        }, [
+          (i(), a("svg", {
+            class: f([{ "is-active": l.size === t }, "size-option-image"]),
+            viewBox: "0 0 99 65",
+            innerHTML: p
+          }, null, 10, w))
+        ], 8, $))), 128))
+      ])
+    ])
+  ]);
+}
+const L = /* @__PURE__ */ m(g, [["render", x], ["__scopeId", "data-v-4c3535c0"]]);
+export {
+  L as default
+};

package/dist/VideoSelectModal-BhbanMix.js

@@ -0,0 +1,217 @@
+import B from "./VideoPlayerInput-DBxcTUb7.js";
+import { B as C, a as z } from "./index-BZDey7B-.js";
+import { _ as M, p as S, a3 as L, e as v, o as d, c as x, w as n, s as l, d as c, l as w, b as g, B as y, v as V, f as T } from "./main-Bn5XkQPb.js";
+const I = S.pexels.id, N = {
+  name: "VideoSelectModal",
+  i18nOptions: {
+    namespaces: "videoSelectModal",
+    messages: {
+      en: {
+        creditVideos: "Videos from {{thing}}",
+        tabLink: "Use link"
+      },
+      sv: {
+        creditVideos: "Videor från {{thing}}",
+        tabLink: "Egen länk"
+      }
+    }
+  },
+  components: {
+    BackgroundModal: C,
+    BackgroundList: z,
+    VideoPlayerInput: B
+  },
+  emits: ["input", "close"],
+  data() {
+    return {
+      activeTab: "pexels",
+      selectedVideo: null,
+      customVideo: null
+    };
+  },
+  methods: {
+    async fetch({ query: i, page: e }) {
+      const { data: r } = await L.get("https://api.pexels.com/videos/search", {
+        headers: {
+          Authorization: I
+        },
+        params: {
+          page: e,
+          per_page: 12,
+          query: i
+        }
+      }), m = (s, o) => s.height < o.height || s.width < o.width ? -1 : 1, t = (s) => (s.find(({ height: o }) => o > 1e3 && o < 1200) || {}).link;
+      return {
+        items: (r.videos || []).map(
+          ({ id: s, image: o, video_files: p = [], user: u }) => {
+            const { sd: f, hd: a } = (p || []).sort(m).reduce(
+              (k, h) => (k[h.quality] && h.link && k[h.quality].push(h.link), k),
+              { sd: [], hd: [] }
+            ), [b] = f;
+            let _ = t(p);
+            return _ || ([_] = a.length ? a : f.slice(-1)), {
+              id: `${s}`,
+              image: o,
+              minImage: o,
+              video: _,
+              minVideo: b,
+              userName: u.name,
+              userLink: u.link
+            };
+          }
+        ),
+        total: r.total_results
+      };
+    },
+    selectVideo(i) {
+      const { id: e, image: r, video: m } = i || {};
+      this.selectedVideo = {
+        id: e,
+        url: m,
+        thumbnail: r,
+        provider: "pexels"
+      };
+    },
+    onSave() {
+      const i = this.activeTab === "pexels" ? this.selectedVideo : this.customVideo;
+      this.$emit("input", i), this.$emit("close");
+    }
+  }
+}, P = {
+  class: "flex w-full items-center justify-center",
+  style: { padding: "calc(0.25 * var(--rem)) calc(1 * var(--rem))", "border-bottom": "1px solid hsl(0, 0%, 88%)" }
+}, U = { style: { display: "inline-flex", "align-items": "center" } }, q = {
+  style: { "margin-right": "calc(0.5 * var(--rem))" },
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "28",
+  height: "28",
+  viewBox: "0 0 32 32"
+}, H = { style: { display: "inline-flex", "align-items": "center" } }, j = {
+  style: { "margin-right": "calc(0.5 * var(--rem))" },
+  width: "28",
+  height: "28",
+  xmlns: "http://www.w3.org/2000/svg",
+  version: "1.1",
+  x: "0",
+  y: "0",
+  "xml:space": "preserve",
+  viewBox: "0 0 71.412 50"
+}, A = {
+  key: 1,
+  class: "flex w-full flex-col items-center justify-center"
+}, E = { style: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, D = { style: { position: "relative", width: "100%", "padding-top": "56.25%", "background-color": "hsl(var(--gray-color-100) / 1)", "border-radius": "0.5em", "margin-bottom": "calc(1.5 * var(--rem))" } }, O = ["src"];
+function $(i, e, r, m, t, s) {
+  const o = v("CButton"), p = v("BackgroundList"), u = v("VideoPlayerInput"), f = v("BackgroundModal");
+  return d(), x(f, {
+    onClose: e[3] || (e[3] = (a) => i.$emit("close"))
+  }, {
+    header: n(() => [
+      l("div", P, [
+        c(o, {
+          style: w([{ "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }, t.activeTab === "pexels" && { opacity: 1 }]),
+          onClick: e[0] || (e[0] = (a) => t.activeTab = "pexels")
+        }, {
+          default: n(() => [
+            l("span", U, [
+              (d(), g("svg", q, e[4] || (e[4] = [
+                l("path", {
+                  d: "M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z",
+                  fill: "#05A081"
+                }, null, -1),
+                l("path", {
+                  d: "M13 21h3.863v-3.752h1.167a3.124 3.124 0 1 0 0-6.248H13v10zm5.863 2H11V9h7.03a5.124 5.124 0 0 1 .833 10.18V23z",
+                  fill: "#fff"
+                }, null, -1)
+              ]))),
+              y(" " + V(i.$t("_common:video").capitalize()), 1)
+            ])
+          ]),
+          _: 1
+        }, 8, ["style"]),
+        c(o, {
+          style: w([{ "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }, t.activeTab === "customUrl" && { opacity: 1 }]),
+          onClick: e[1] || (e[1] = (a) => t.activeTab = "customUrl")
+        }, {
+          default: n(() => [
+            l("span", H, [
+              (d(), g("svg", j, e[5] || (e[5] = [
+                l("g", { transform: "scale(.58824)" }, [
+                  l("path", {
+                    d: "M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z",
+                    fill: "red",
+                    "fill-opacity": "1"
+                  }),
+                  l("path", {
+                    fill: "#fff",
+                    d: "M80.2 42.5L48.6 24.3v36.4z"
+                  })
+                ], -1)
+              ]))),
+              y(" " + V(i.$t("tabLink").capitalize()), 1)
+            ])
+          ]),
+          _: 1
+        }, 8, ["style"])
+      ])
+    ]),
+    default: n(() => [
+      t.activeTab === "pexels" ? (d(), x(p, {
+        key: 0,
+        fetch: s.fetch,
+        "credit-text": i.$t("creditVideos", { thing: "Pexels" }),
+        "default-query": "nature",
+        onSelect: s.selectVideo
+      }, {
+        footer: n(() => [
+          c(o, {
+            disable: !t.selectedVideo,
+            style: { "margin-left": "0.5em" },
+            type: "secondary",
+            onClick: s.onSave
+          }, {
+            default: n(() => [
+              y(V(i.$t("_common:save")), 1)
+            ]),
+            _: 1
+          }, 8, ["disable", "onClick"])
+        ]),
+        _: 1
+      }, 8, ["fetch", "credit-text", "onSelect"])) : (d(), g("div", A, [
+        l("div", E, [
+          l("div", D, [
+            t.customVideo ? (d(), g("iframe", {
+              key: 0,
+              src: t.customVideo.url,
+              class: "custom-video-preview"
+            }, null, 8, O)) : T("", !0)
+          ]),
+          c(u, {
+            modelValue: t.customVideo,
+            "onUpdate:modelValue": e[2] || (e[2] = (a) => t.customVideo = a),
+            filled: !0,
+            "video-options": { background: !0 }
+          }, {
+            default: n(() => [
+              c(o, {
+                disable: !t.customVideo,
+                type: "secondary",
+                onClick: s.onSave
+              }, {
+                default: n(() => [
+                  y(V(i.$t("_common:save")), 1)
+                ]),
+                _: 1
+              }, 8, ["disable", "onClick"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])
+      ]))
+    ]),
+    _: 1
+  });
+}
+const K = /* @__PURE__ */ M(N, [["render", $], ["__scopeId", "data-v-3ff9b230"]]);
+export {
+  K as default
+};