@wix/editor-react-components 1.2153.0

package/dist/site/components/VideoUpload/css.css

@@ -0,0 +1,492 @@
+.tooltipContainer__G6UKo {
+  position: relative;
+}
+
+.tooltip__cfZVz {
+  position: absolute;
+  z-index: 4;
+  bottom: 100%;
+  left: 50%;
+  width: max-content;
+  transform: translateX(-50%);
+  opacity: 0;
+  animation: fadeIn__FWxCJ 0.2s ease-in-out forwards;
+}
+
+.tooltipContent__yXoxN {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font: normal normal normal 12px/1.3333em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
+  color: #fff;
+  background-color: #000;
+  text-align: center;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
+}
+
+@keyframes fadeIn__FWxCJ {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}.button__rYrx5 {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button__rYrx5 svg > path {
+  fill: white;
+  fill-opacity: 0.8;
+  transition: fill-opacity 0.2s ease;
+}
+.button__rYrx5:hover svg > path {
+  fill-opacity: 1;
+}.button__r1qaT {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button__r1qaT svg > rect:first-child {
+  stroke: white;
+  stroke-opacity: 0.8;
+  transition: stroke-opacity 0.2s ease;
+}
+.button__r1qaT svg > rect:last-child {
+  fill: white;
+  fill-opacity: 0.8;
+  transition: fill-opacity 0.2s ease;
+}
+.button__r1qaT:hover svg > rect:first-child {
+  stroke-opacity: 1;
+}
+.button__r1qaT:hover svg > rect:last-child {
+  fill-opacity: 1;
+}.button__-G0To {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button__-G0To svg > path {
+  fill: white;
+  fill-opacity: 0.8;
+  transition: fill-opacity 0.2s ease;
+}
+.button__-G0To:hover svg > path {
+  fill-opacity: 1;
+}
+.button__-G0To svg {
+  width: 24px;
+  height: 24px;
+}.container__Q36eX {
+  position: relative;
+  outline: none;
+}
+.container__Q36eX.horizontal__HPMYd {
+  width: 100%;
+  height: 16px;
+  display: flex;
+  align-items: center;
+}
+.container__Q36eX.vertical__VZy4M {
+  width: 4px;
+  height: 60px;
+  cursor: pointer;
+}
+
+.track__nC3mW {
+  position: relative;
+  cursor: pointer;
+}
+.horizontal__HPMYd .track__nC3mW {
+  width: 100%;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.vertical__VZy4M .track__nC3mW {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.fill__8uKY0 {
+  position: absolute;
+  background-color: #fff;
+}
+.horizontal__HPMYd .fill__8uKY0 {
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 2;
+}
+.vertical__VZy4M .fill__8uKY0 {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 2px;
+  transition: height 0.1s ease-out;
+}
+
+.scrubber__ccnxA {
+  position: absolute;
+  background-color: #ffffff;
+  border-radius: 50%;
+  cursor: grab;
+  z-index: 3;
+}
+.horizontal__HPMYd .scrubber__ccnxA {
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+.vertical__VZy4M .scrubber__ccnxA {
+  left: 50%;
+  transform: translateX(-50%);
+  transition: bottom 0.1s ease-out;
+}
+.scrubber__ccnxA.dragging__-RzLd {
+  cursor: grabbing;
+}
+.scrubber__ccnxA:active {
+  cursor: grabbing;
+}.loadBar__--aie {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+  z-index: 1;
+}.timeDisplay__VBmVE {
+  display: flex;
+  align-items: center;
+  font: normal normal normal 10px/1.6em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
+  color: #fff;
+  user-select: none;
+  vertical-align: middle;
+}.popoverContainer__FW5RK {
+  position: relative;
+}
+
+.popover__1Bm0r {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  visibility: hidden;
+  opacity: 0;
+  padding: 20px 10px;
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0.95);
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
+}
+.popover__1Bm0r.open__yUU6H {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) scale(1);
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear;
+}
+
+.popoverContent__XjDnJ {
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}.button__P2BlV {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button__P2BlV svg > path {
+  fill: white;
+  fill-opacity: 0.8;
+  transition: fill-opacity 0.2s ease;
+}
+.button__P2BlV:hover svg > path {
+  fill-opacity: 1;
+}
+
+.popoverItemsContainer__yBSl1 {
+  width: 150px;
+  padding: 5px 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.popoverItem__dKEg- {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3px;
+  cursor: pointer;
+  color: #fff;
+  width: 100%;
+  height: 24px;
+  border-radius: 2px;
+}
+
+.popoverItem__dKEg-:hover,
+.popoverItem__dKEg-:focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.selected__Bz1Eq {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.selected__Bz1Eq:hover,
+.selected__Bz1Eq:focus {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.checkedIcon__ayQhj {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}.volumeSlider__04Fog {
+  width: 4px;
+  height: 60px;
+  cursor: pointer;
+  outline: none;
+}.button__K-We5 {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button__K-We5 svg > path {
+  fill: white;
+  fill-opacity: 0.8;
+  transition: fill-opacity 0.2s ease;
+}
+.button__K-We5:hover svg > path {
+  fill-opacity: 1;
+}
+
+.sliderContainer__fhbJg {
+  width: 28px;
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}.container__pEFys {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.controlsContainer__RbX-6 {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.leftControls__xO-7b {
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.leftControlsInner__f-BlF {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.rightControls__eveyc {
+  padding-right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}.root__0kAkf {
+  animation: rotate__F3-VV 2s linear infinite;
+  width: 36px;
+  height: 36px;
+}
+
+.circle__rkQBc {
+  animation: dash__iqldy 1.5s ease-in-out infinite;
+  stroke: #fff;
+}
+
+@keyframes rotate__F3-VV {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash__iqldy {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}.root__UidXn {
+  --boxShadow: initial;
+  --border-color: black;
+  --border-width: initial;
+  --border-style: initial;
+  --borderStartStartRadius: initial;
+  --borderStartEndRadius: initial;
+  --borderEndStartRadius: initial;
+  --borderEndEndRadius: initial;
+  min-height: fit-content !important;
+  container-type: size;
+}
+
+.videoPlayerWrapper__hBt0h {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.videoContainer__y-jQ5,
+.videoPlayerContainer__GA-EV {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.videoPlayerContainer__GA-EV {
+  box-shadow: var(--boxShadow, none);
+  border-color: var(--border-color, transparent);
+  border-width: var(--border-width, 0);
+  border-style: var(--border-style, solid);
+  border-start-start-radius: var(--borderStartStartRadius, 0);
+  border-start-end-radius: var(--borderStartEndRadius, 0);
+  border-end-start-radius: var(--borderEndStartRadius, 0);
+  border-end-end-radius: var(--borderEndEndRadius, 0);
+  overflow: hidden;
+}
+.videoPlayerContainer__GA-EV.lockedAspectRatio__tnQ-s {
+  aspect-ratio: var(--aspect-ratio);
+  width: min(100%, 100cqh * var(--aspect-ratio));
+  height: min(100%, 100cqw / var(--aspect-ratio));
+}
+.videoPlayerContainer__GA-EV.lockedAspectRatio__tnQ-s.fullscreen__nM-7I {
+  --video-fit: contain;
+  --video-position: center;
+  --poster-fit: contain;
+  box-shadow: none;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.playbackControlsContainer__VE-y0 {
+  position: absolute;
+  height: 48px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.21) 70%, rgba(0, 0, 0, 0.7) 100%);
+  color: #fff;
+  padding: 12px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.titleContainer__HGfvN {
+  user-select: none;
+  position: absolute;
+  height: 90px;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: linear-gradient(180deg, rgba(0, 6, 36, 0.7) 0%, rgba(0, 6, 36, 0.21) 39.97%, rgba(0, 6, 36, 0) 71.67%);
+  padding: 12px 24px;
+  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.title__J215T {
+  font: var(--font, normal normal normal 28px/1.2em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif);
+  color: #fff;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.visible__jkM-V {
+  opacity: 1;
+}
+
+.spinnerContainer__BIN3B,
+.playButtonContainer__k8tY- {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.playButton__FDp-e {
+  cursor: pointer;
+}
+.video-container__qOTQi {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  container-type: size;
+}
+
+.video-poster-img__bHEFW {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--poster-fit, cover);
+  object-position: var(--poster-align, center);
+}
+
+.video__YuKrH {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  object-fit: var(--video-fit, cover);
+  opacity: 0;
+  --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
+  --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
+  object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
+}
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
+}

package/dist/site/components/VideoUpload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as VideoUpload } from './component';

package/dist/site/components/VideoUpload/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import VideoUpload from './component.js';
+
+export { VideoUpload };
+export default VideoUpload;

package/dist/site/components/VideoUpload/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

package/dist/site/components/VideoUpload/manifest.js

@@ -0,0 +1,204 @@
+import { a as ACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, I as INTERACTIONS, A as Archetype, L as LAYOUT } from "../chunks/chunk-JPMZBG44.js";
+const manifest = {
+  id: "8441a520-52ed-4c32-9b9d-0aa8c2604b01",
+  type: "wixEditorElements.VideoUpload",
+  description: "Native video player, allows users to upload and play video files",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 400
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 225
+      },
+      preserveAspectRatio: true
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/VideoUpload/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/VideoUpload"
+    },
+    editor: {
+      componentUrl: "./site/components/VideoUpload/component.preview.tsx"
+    },
+    sdk: {
+      url: "./site/components/VideoUpload/sdk.ts"
+    }
+  },
+  editorElement: {
+    selector: ".wixui-video-upload",
+    displayName: "Video Player",
+    archetype: Archetype.Video,
+    interactions: {
+      triggers: [
+        INTERACTIONS.TRIGGER_TYPE.viewEnter,
+        INTERACTIONS.TRIGGER_TYPE.viewProgress,
+        INTERACTIONS.TRIGGER_TYPE.pointerMove
+      ],
+      effectGroups: [INTERACTIONS.EFFECT_GROUP.UNKNOWN_EFFECT_GROUP]
+    },
+    cssProperties: {
+      boxShadow: {}
+    },
+    displayGroups: {
+      borderGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+        border: {
+          color: "border-color",
+          width: "border-width",
+          style: "border-style"
+        }
+      }
+    },
+    cssCustomProperties: {
+      boxShadow: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        defaultValue: "none"
+      },
+      font: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+        defaultValue: "normal normal normal 28px/1.2em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
+      },
+      "border-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+        displayName: "Border Color",
+        defaultValue: "transparent"
+      },
+      "border-width": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+        displayName: "Border Width",
+        defaultValue: "0px"
+      },
+      "border-style": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStyle,
+        displayName: "Border Style",
+        defaultValue: "solid"
+      },
+      borderBottom: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottom,
+        defaultValue: "0px"
+      },
+      borderInlineStart: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStart,
+        defaultValue: "0px"
+      },
+      borderInlineEnd: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEnd,
+        defaultValue: "0px"
+      },
+      borderTop: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTop,
+        defaultValue: "0px"
+      },
+      borderStartStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
+        defaultValue: "0px"
+      },
+      borderStartEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
+        defaultValue: "0px"
+      },
+      borderEndStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
+        defaultValue: "0px"
+      },
+      borderEndEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
+        defaultValue: "0px"
+      }
+    },
+    data: {
+      video: {
+        dataType: DATA.DATA_TYPE.video,
+        [DATA.DATA_TYPE.video]: {
+          category: "VIDEO"
+        },
+        disableDeletion: true
+      },
+      loop: {
+        displayName: "Loop video",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      autoplay: {
+        displayName: "Play automatically",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      mute: {
+        displayName: "Mute on play",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: true
+      },
+      playbackRate: {
+        displayName: "Playback speed",
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 1
+      },
+      enableTitle: {
+        displayName: "Show video title",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      enableControls: {
+        displayName: "Show controls",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: true
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.role,
+            DATA.A11Y_ATTRIBUTES.tabIndex,
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaLive,
+            DATA.A11Y_ATTRIBUTES.ariaRoledescription,
+            DATA.A11Y_ATTRIBUTES.ariaLevel,
+            DATA.A11Y_ATTRIBUTES.ariaHidden,
+            DATA.A11Y_ATTRIBUTES.ariaAtomic,
+            DATA.A11Y_ATTRIBUTES.ariaCurrent,
+            DATA.A11Y_ATTRIBUTES.ariaRelevant
+          ]
+        }
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["playbackRate"]
+      },
+      cssProperties: {
+        hide: ["boxShadow"]
+      },
+      cssCustomProperties: {
+        hide: [
+          "borderInlineStart",
+          "borderInlineEnd",
+          "borderTop",
+          "borderBottom"
+        ]
+      }
+    },
+    customActions: {
+      coverImage: {
+        displayName: "Cover Image",
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "a7f3b8c2-4e5d-4f8a-8b1c-2d3e4f5a6b7c"
+          }
+        }
+      }
+    },
+    helpArticle: {
+      kbId: "39a8c672-5bf5-4a39-bfd8-755db3f8f22c"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/VideoUpload/panels/CoverImagePanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/site/components/VideoUpload/panels/CoverImagePanel/translations/consts.d.ts

@@ -0,0 +1,6 @@
+export declare const TranslationKeys: {
+    readonly panelDescription: "single_video_player.cover_image.panel.description";
+    readonly uploadInfoTooltip: "single_video_player.cover_image.tooltips.upload_info";
+};
+export type Translations = Record<keyof typeof TranslationKeys, string>;
+export declare const DefaultTranslations: Translations;