@zync/zync-screnplay-player 0.1.234 → 0.1.236

package/dist/screenplay/RemotionRenderer/components/layouts/{VideoInset.js → BrollInset.js}

@@ -1,6 +1,7 @@
 import React from "react";
 import { AbsoluteFill, Audio, Easing, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig, Video } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
 import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 var ANIMATION_SECONDS = 1.2;
 var INSET_ASPECT_RATIO = 9 / 16;
@@ -66,7 +67,7 @@ var SourceVideo = function SourceVideo(_ref2) {
     }
   });
 };
-var VideoInsetContent = function VideoInsetContent(_ref3) {
+var BrollInsetContent = function BrollInsetContent(_ref3) {
   var brollUrl = _ref3.brollUrl,
     children = _ref3.children,
     disableTransitionSounds = _ref3.disableTransitionSounds,
@@ -74,7 +75,6 @@ var VideoInsetContent = function VideoInsetContent(_ref3) {
     frameColor = _ref3.frameColor,
     height = _ref3.height,
     noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
     outputOrientation = _ref3.outputOrientation,
     sourceVideoOrientation = _ref3.sourceVideoOrientation,
     startVideoFrom = _ref3.startVideoFrom,
@@ -89,8 +89,8 @@ var VideoInsetContent = function VideoInsetContent(_ref3) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   });
-  var sourceSrc = noBackgroundVideoUrl || videoUrl;
-  var sourceTransparent = Boolean(noBackgroundVideoUrl);
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor;
   var inset = getInsetMetrics({
     width: width,
     height: height,
@@ -123,11 +123,13 @@ var VideoInsetContent = function VideoInsetContent(_ref3) {
   }) : null, /*#__PURE__*/React.createElement("div", {
     style: {
       borderRadius: sourceBorderRadius,
+      border: accentColor ? "4px solid ".concat(accentColor) : undefined,
       boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
       height: sourceHeight,
       left: sourceLeft,
       overflow: "hidden",
       position: "absolute",
+      boxSizing: "border-box",
       top: sourceTop,
       width: sourceWidth,
       zIndex: 2
@@ -137,9 +139,9 @@ var VideoInsetContent = function VideoInsetContent(_ref3) {
     height: sourceHeight,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     sourceVideoOrientation: sourceVideoOrientation,
-    src: sourceSrc,
+    src: videoUrl,
     startVideoFrom: startVideoFrom,
-    transparent: sourceTransparent,
+    transparent: false,
     width: sourceWidth
   })), /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -147,7 +149,7 @@ var VideoInsetContent = function VideoInsetContent(_ref3) {
     }
   }, children)));
 };
-export var VideoInset = function VideoInset(_ref4) {
+export var BrollInset = function BrollInset(_ref4) {
   var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var brollUrl = _ref4.brollUrl,
     children = _ref4.children,
@@ -156,7 +158,6 @@ export var VideoInset = function VideoInset(_ref4) {
     faceMetadata = _ref4.faceMetadata,
     frameColor = _ref4.frameColor,
     noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
     sourceVideoOrientation = _ref4.sourceVideoOrientation,
     startVideoFrom = _ref4.startVideoFrom,
     _ref4$useSquareInLand = _ref4.useSquareInLandscape,
@@ -186,14 +187,13 @@ export var VideoInset = function VideoInset(_ref4) {
       }
     }, orientationOverride),
     activeOrientation = _useOrientationBased.activeOrientation;
-  var content = /*#__PURE__*/React.createElement(VideoInsetContent, {
+  var content = /*#__PURE__*/React.createElement(BrollInsetContent, {
     brollUrl: brollUrl,
     disableTransitionSounds: disableTransitionSounds,
     faceMetadata: faceMetadata,
     frameColor: frameColor,
     height: height,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
-    noBackgroundVideoUrl: noBackgroundVideoUrl,
     outputOrientation: activeOrientation,
     sourceVideoOrientation: sourceVideoOrientation,
     startVideoFrom: startVideoFrom,

package/dist/screenplay/RemotionRenderer/components/layouts/{ImageInset.js → MotionStillInset.js}

@@ -1,6 +1,7 @@
 import React from "react";
 import { AbsoluteFill, Audio, Easing, Img, interpolate, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
 import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+import { useTheme } from "../../theme/hooks/useTheme.js";
 import FaceCenteredVideo from "../utils/FaceCenteredVideo";
 var ANIMATION_SECONDS = 1.2;
 var INSET_ASPECT_RATIO = 9 / 16;
@@ -66,7 +67,7 @@ var SourceVideo = function SourceVideo(_ref2) {
     }
   });
 };
-var ImageInsetContent = function ImageInsetContent(_ref3) {
+var MotionStillInsetContent = function MotionStillInsetContent(_ref3) {
   var children = _ref3.children,
     disableTransitionSounds = _ref3.disableTransitionSounds,
     durationInFrames = _ref3.durationInFrames,
@@ -75,7 +76,6 @@ var ImageInsetContent = function ImageInsetContent(_ref3) {
     height = _ref3.height,
     imageUrl = _ref3.imageUrl,
     noBackgroundVideoEffects = _ref3.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref3.noBackgroundVideoUrl,
     outputOrientation = _ref3.outputOrientation,
     sourceVideoOrientation = _ref3.sourceVideoOrientation,
     startVideoFrom = _ref3.startVideoFrom,
@@ -90,8 +90,8 @@ var ImageInsetContent = function ImageInsetContent(_ref3) {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   });
-  var sourceSrc = noBackgroundVideoUrl || videoUrl;
-  var sourceTransparent = Boolean(noBackgroundVideoUrl);
+  var _useTheme = useTheme(),
+    accentColor = _useTheme.accentColor;
   var inset = getInsetMetrics({
     width: width,
     height: height,
@@ -132,11 +132,13 @@ var ImageInsetContent = function ImageInsetContent(_ref3) {
   }) : null, /*#__PURE__*/React.createElement("div", {
     style: {
       borderRadius: sourceBorderRadius,
+      border: accentColor ? "4px solid ".concat(accentColor) : undefined,
       boxShadow: progress > 0 ? "0 ".concat(16 * progress, "px ").concat(44 * progress, "px rgba(0, 0, 0, ").concat(0.34 * progress, ")") : undefined,
       height: sourceHeight,
       left: sourceLeft,
       overflow: "hidden",
       position: "absolute",
+      boxSizing: "border-box",
       top: sourceTop,
       width: sourceWidth,
       zIndex: 2
@@ -146,9 +148,9 @@ var ImageInsetContent = function ImageInsetContent(_ref3) {
     height: sourceHeight,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
     sourceVideoOrientation: sourceVideoOrientation,
-    src: sourceSrc,
+    src: videoUrl,
     startVideoFrom: startVideoFrom,
-    transparent: sourceTransparent,
+    transparent: false,
     width: sourceWidth
   })), /*#__PURE__*/React.createElement(AbsoluteFill, {
     style: {
@@ -156,7 +158,7 @@ var ImageInsetContent = function ImageInsetContent(_ref3) {
     }
   }, children)));
 };
-export var ImageInset = function ImageInset(_ref4) {
+export var MotionStillInset = function MotionStillInset(_ref4) {
   var _compositionProps$out, _window, _window$screenplayPro, _window$screenplayPro2;
   var children = _ref4.children,
     _ref4$disableTransiti = _ref4.disableTransitionSounds,
@@ -166,7 +168,6 @@ export var ImageInset = function ImageInset(_ref4) {
     frameColor = _ref4.frameColor,
     imageUrl = _ref4.imageUrl,
     noBackgroundVideoEffects = _ref4.noBackgroundVideoEffects,
-    noBackgroundVideoUrl = _ref4.noBackgroundVideoUrl,
     sourceVideoOrientation = _ref4.sourceVideoOrientation,
     startVideoFrom = _ref4.startVideoFrom,
     _ref4$useSquareInLand = _ref4.useSquareInLandscape,
@@ -196,7 +197,7 @@ export var ImageInset = function ImageInset(_ref4) {
       }
     }, orientationOverride),
     activeOrientation = _useOrientationBased.activeOrientation;
-  var content = /*#__PURE__*/React.createElement(ImageInsetContent, {
+  var content = /*#__PURE__*/React.createElement(MotionStillInsetContent, {
     disableTransitionSounds: disableTransitionSounds,
     durationInFrames: durationInFrames,
     faceMetadata: faceMetadata,
@@ -204,7 +205,6 @@ export var ImageInset = function ImageInset(_ref4) {
     height: height,
     imageUrl: imageUrl,
     noBackgroundVideoEffects: noBackgroundVideoEffects,
-    noBackgroundVideoUrl: noBackgroundVideoUrl,
     outputOrientation: activeOrientation,
     sourceVideoOrientation: sourceVideoOrientation,
     startVideoFrom: startVideoFrom,

package/dist/screenplay/RemotionRenderer/development.js

@@ -911,7 +911,7 @@ var renderer = new RemotionRenderer({
     }, {
       recordingIndex: 1,
       layout: {
-        type: "video_inset",
+        type: "broll_inset",
         data: {
           noBackgroundVideoEffects: {
             facePop: false,
@@ -1407,7 +1407,7 @@ var renderer = new RemotionRenderer({
     }, {
       recordingIndex: 3,
       layout: {
-        type: "image_inset",
+        type: "motion_still_inset",
         data: {
           noBackgroundVideoEffects: {
             facePop: false,

package/dist/screenplay/RemotionRenderer/main/lib/layouts/LayoutFactory.js

@@ -41,7 +41,7 @@ export var LayoutFactory = /*#__PURE__*/function () {
         case "broll_split_screen":
         case "broll_green_screen":
         case "broll_studio_backdrop":
-        case "video_inset":
+        case "broll_inset":
         case "key_point_overlay_depth":
         case "simple_frame":
           {
@@ -91,7 +91,7 @@ export var LayoutFactory = /*#__PURE__*/function () {
         case "motion_still":
         case "motion_still_green_screen":
         case "motion_still_full_screen":
-        case "image_inset":
+        case "motion_still_inset":
         case "motion_still_studio_backdrop":
           {
             layout = new MotionStillLayout(props).flatten();

package/dist/screenplay/RemotionRenderer/registeredComponents.js

@@ -45,8 +45,8 @@ import { DynamicTriangle } from "./components/layouts/DynamicTriangle";
 import { KeywordStudioBackdrop } from "./components/layouts/KeywordStudioBackdrop";
 import { MotionStillGreenScreenV2 } from "./components/layouts/MotionStillGreenScreenV2";
 import { HookVideo } from "./components/layouts/HookVideo";
-import { VideoInset } from "./components/layouts/VideoInset";
-import { ImageInset } from "./components/layouts/ImageInset";
+import { BrollInset } from "./components/layouts/BrollInset";
+import { MotionStillInset } from "./components/layouts/MotionStillInset";
 
 /** Update this so that Remotion knows which component to render when it is passed via screenplay. Ex. "title" will have rendered "Title" component
  *  Here we are mapping directly types and component names. Types are snake_case and components PascalCase.
@@ -80,8 +80,8 @@ export var RegisteredComponents = {
   KeyPointOverlayDepth: KeyPointOverlayDepth,
   DynamicTriangle: DynamicTriangle,
   HookVideo: HookVideo,
-  VideoInset: VideoInset,
-  ImageInset: ImageInset,
+  BrollInset: BrollInset,
+  MotionStillInset: MotionStillInset,
   //effects
   BrollFullscreen: BrollFullscreen,
   PhraseRainbowEffect: PhraseRainbowEffect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zync/zync-screnplay-player",
-  "version": "0.1.234",
+  "version": "0.1.236",
   "files": [
     "dist"
   ],