From a824b3a049f2b051a5336c75689c08262562e55d Mon Sep 17 00:00:00 2001 From: James Hush Date: Wed, 22 May 2024 17:11:59 +0200 Subject: [PATCH 1/5] Revel layouts --- .../daily-baseline/components/VideoGrid.js | 163 ++- .../daily-baseline/components/VideoSplit.js | 326 +++++- compositions/daily-baseline/params.js | 994 +++++++++--------- 3 files changed, 959 insertions(+), 524 deletions(-) diff --git a/compositions/daily-baseline/components/VideoGrid.js b/compositions/daily-baseline/components/VideoGrid.js index d90dca97..695159f0 100644 --- a/compositions/daily-baseline/components/VideoGrid.js +++ b/compositions/daily-baseline/components/VideoGrid.js @@ -1,11 +1,143 @@ -import * as React from 'react'; -import { Box, Video, Text } from '#vcs-react/components'; -import * as layoutFuncs from '../layouts.js'; -import { PausedPlaceholder } from './PausedPlaceholder.js'; -import decorateVideoGridItem from './overrides/decorateVideoGridItem.js'; -import { DEFAULT_OFFSET_VIDEO_SINGLE_PX } from '../constants.js'; - -export default function VideoGrid(gridProps) { +import * as React from "react"; +import { Box, Video, Text, Image } from "#vcs-react/components"; +import { useGrid, useParams } from "#vcs-react/hooks"; +import * as layoutFuncs from "../layouts.js"; +import { PausedPlaceholder } from "./PausedPlaceholder.js"; +import decorateVideoGridItem from "./overrides/decorateVideoGridItem.js"; +import { DEFAULT_OFFSET_VIDEO_SINGLE_PX } from "../constants.js"; + +let primaryColor; +let pauseBgColor; + +export default function AugmentedGrid(props) { + const { participantDescs = [] } = props; + const params = useParams(); + + const currentLayout = params["currentLayout"]; + primaryColor = params["voedaily.primary.color"]; + pauseBgColor = params["voedaily.pause.bgColor"]; + let baseVideo, otherOverlays; + let bubbleIdx; + + switch (currentLayout) { + case "2x2": + bubbleIdx = 4; + baseVideo = ; + break; + default: + bubbleIdx = null; + baseVideo = ; + break; + } + if (bubbleIdx) { + if (participantDescs.length > bubbleIdx) { + otherOverlays = ( + + ); + } + } + + return ( + + {baseVideo && baseVideo} + {otherOverlays && otherOverlays} + + ); +} +/* will be used once display name alignment is done */ +function getInitials(name) { + let initials; + if (name.indexOf("|") >= 0) { + initials = name.split("|")[0].substring(0, 2).toUpperCase(); // Has initials + } else { + initials = + name.indexOf("_") > 0 + ? name + .split("_") + .map((x) => x && x[0]) + .join() + .replace(",", "") + .toUpperCase() // Get first name and last name to initials + : "AN"; // Anonymous + } + return initials; +} +// a row of picture-in-picture videos, using an inline layout function +// +function PipRow({ participantDescs }) { + const pxPerGu = useGrid().pixelsPerGridUnit; + const pipSize_gu = 6; + const margin_gu = 2; + const interval_gu = 1; + + const videoStyle = { + cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle + }; + const outlineStyle = { + ...videoStyle, + strokeWidth_px: 2, // the outline for the video + strokeColor: primaryColor, + }; + const fillStyle = { + cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle + strokeWidth_px: 2, // the outline for the video + strokeColor: primaryColor, + fillColor: pauseBgColor, + }; + + function rowLayoutFn(parentFrame, params) { + const { idx } = params; + let { x, y, w, h } = parentFrame; + const margin = margin_gu * pxPerGu; + const interval = interval_gu * pxPerGu; + + w = h = pipSize_gu * pxPerGu; + + x += margin + (interval + w) * idx; + y += parentFrame.h - margin - h; + + return { x, y, w, h }; + } + + const labelStyle = { + textColor: primaryColor, + fontFamily: "DMSans", + fontWeight: "700", + textAlign: "center", + fontSize_px: 40, + }; + + return participantDescs.map((pd, idx) => { + const { videoId, paused, displayName = "" } = pd; + + return paused ? ( + + {displayName ? ( + + + {getInitials(displayName)} + + + ) : ( + + )} + + ) : ( + + + ); + }); +} + +function VideoGrid(gridProps) { let { showLabels, scaleMode, @@ -22,7 +154,8 @@ export default function VideoGrid(gridProps) { fullScreenHighlightItemIndex = -1, } = gridProps; - const totalNumItems = participantDescs.length; + const totalNumItems = 4; // participantDescs.length; + const take4Parts = participantDescs.slice(0, 4); itemInterval_gu = Math.max(-1, itemInterval_gu); outerPadding_gu = Math.max(-1, outerPadding_gu); @@ -35,7 +168,7 @@ export default function VideoGrid(gridProps) { highlighted, paused, } = itemProps; - let key = 'videogriditem_' + index; + let key = "videogriditem_" + index; let itemLayout; let videoBlend; @@ -84,7 +217,7 @@ export default function VideoGrid(gridProps) { participantLabel = ( 0 && frameSize?.h > 0 ? frameSize.w / frameSize.h : 0; @@ -125,7 +258,7 @@ export default function VideoGrid(gridProps) { highlight = ( ); @@ -174,8 +307,6 @@ export default function VideoGrid(gridProps) { } return ( - - {participantDescs.map((d, idx) => makeItem(idx, d))} - + {take4Parts.map((d, idx) => makeItem(idx, d))} ); } diff --git a/compositions/daily-baseline/components/VideoSplit.js b/compositions/daily-baseline/components/VideoSplit.js index ae75b7a7..24674382 100644 --- a/compositions/daily-baseline/components/VideoSplit.js +++ b/compositions/daily-baseline/components/VideoSplit.js @@ -1,15 +1,291 @@ -import * as React from 'react'; -import { Box } from '#vcs-react/components'; -import * as layoutFuncs from '../layouts.js'; -import VideoSingle from './VideoSingle.js'; -import decorateVideoSplitItem from './overrides/decorateVideoSplitItem.js'; +import * as React from "react"; +import { Box, Video, Text, Image } from "#vcs-react/components"; +import { useGrid, useParams } from "#vcs-react/hooks"; +import * as layoutFuncs from "../layouts.js"; +import VideoSingle from "./VideoSingle.js"; +import { PausedPlaceholder } from "./PausedPlaceholder.js"; +import decorateVideoSplitItem from "./overrides/decorateVideoSplitItem.js"; +import { PositionCorner } from "../constants.js"; -export default function VideoSplit(props) { +import { debug } from "#vcs-stdlib/components"; +import { RoomContext } from "#vcs-react/contexts"; + +const textSize_gu = 1; +const headerH_gu = textSize_gu * 10; + +let primaryColor; +let pauseBgColor; + +function body(parentFrame, params, layoutCtx) { + let { x, y, w, h } = parentFrame; + const pxPerGu = layoutCtx.pixelsPerGridUnit; + + const headerH_px = headerH_gu * pxPerGu; + y += headerH_px; + h -= headerH_px; + + return { x, y, w, h }; +} + +export default function AugmentedSplit(props) { + const { participantDescs = [] } = props; + const params = useParams(); + + const currentLayout = params["currentLayout"]; + primaryColor = params["voedaily.primary.color"]; + pauseBgColor = params["voedaily.pause.bgColor"]; + + let baseVideo, pipOverlay, otherOverlays; + let pipIdx; + let bubbleIdx; + const room = React.useContext(RoomContext); + + switch (currentLayout) { + case "1x1": + pipIdx = null; + bubbleIdx = 1; + baseVideo = ; + break; + case "2x1": + pipIdx = null; + bubbleIdx = 2; + baseVideo = ; + break; + case "1x1withPIP": + pipIdx = 1; + bubbleIdx = 2; + baseVideo = ; + break; + case "2x1withPIP": + pipIdx = 2; + bubbleIdx = 3; + baseVideo = ; + break; + default: + pipIdx = null; + bubbleIdx = null; + baseVideo = ; + break; + } + if (pipIdx) { + if (participantDescs.length > pipIdx) { + pipOverlay = ; + } + } + if (bubbleIdx) { + if (participantDescs.length > bubbleIdx) { + otherOverlays = ( + + ); + } + } + + return ( + + {baseVideo && baseVideo} + {pipOverlay && pipOverlay} + {otherOverlays && otherOverlays} + + + ); +} + +/* will be used once display name alignment is done */ +function getInitials(name) { + let initials; + if (name.indexOf("|") >= 0) { + initials = name.split("|")[0].substring(0, 2).toUpperCase(); // Has initials + } else { + initials = + name.indexOf("_") > 0 + ? name + .split("_") + .map((x) => x && x[0]) + .join() + .replace(",", "") + .toUpperCase() // Get first name and last name to initials + : "AN"; // Anonymous + } + return initials; +} + +// a simple picture-in-picture with hardcoded settings +// using the same layout function as VideoPip.js +// +function SimplePip({ participant }) { + const { videoId, displayName = "", paused } = participant; + const pxPerGu = useGrid().pixelsPerGridUnit; + const pipSize_gu = 10; + + const layoutProps = { + positionCorner: PositionCorner.TOP_RIGHT, + aspectRatio: 1, + height_gu: pipSize_gu, + margin_gu: 2, + }; + const layout = [layoutFuncs.pip, layoutProps]; + + const labelStyle = { + textColor: primaryColor, + fontFamily: "DMSans", + fontWeight: "700", + textAlign: "center", + fontSize_px: 56, + }; + + // const layoutPause = [centerText, { minH_gu: 5, minW_gu: 3 }]; + const layoutPause = [ + layoutFuncs.placeText, + { vAlign: "center", hAlign: "center" }, + ]; + + const videoStyle = { + cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle + }; + const outlineStyle = { + ...videoStyle, + strokeWidth_px: pxPerGu / 3, // the outline for the video + strokeColor: primaryColor, + }; + const fillStyle = { + ...videoStyle, + fillColor: pauseBgColor, + strokeWidth_px: pxPerGu / 3, // the outline for the video + strokeColor: primaryColor, + }; + + let content; + if (paused || videoId == null) { + // no video available, show a placeholder with the icon + content = ( + + {displayName ? ( + + + {getInitials(displayName)} + + + ) : ( + + )} + + ); + } else { + content = ( + + + ); + } + + const arr = [content]; + + return ( + + {arr} + + ); +} + +// a row of picture-in-picture videos, using an inline layout function +// +function PipRow({ participantDescs }) { + const pxPerGu = useGrid().pixelsPerGridUnit; + const pipSize_gu = 6; + const margin_gu = 2; + const interval_gu = 1; + + const videoStyle = { + cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle + }; + const outlineStyle = { + ...videoStyle, + strokeWidth_px: 2, // the outline for the video + strokeColor: primaryColor, + }; + const fillStyle = { + cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle + strokeWidth_px: 2, // the outline for the video + strokeColor: primaryColor, + fillColor: pauseBgColor, + }; + + function rowLayoutFn(parentFrame, params) { + const { idx } = params; + let { x, y, w, h } = parentFrame; + const margin = margin_gu * pxPerGu; + const interval = interval_gu * pxPerGu; + + w = h = pipSize_gu * pxPerGu; + + x += margin + (interval + w) * idx; + y += parentFrame.h - margin - h; + + return { x, y, w, h }; + } + + const labelStyle = { + textColor: primaryColor, + fontFamily: "DMSans", + fontWeight: "700", + textAlign: "center", + fontSize_px: 40, + }; + + return participantDescs.map((pd, idx) => { + const { videoId, paused, displayName = "" } = pd; + + return paused ? ( + + {displayName ? ( + + + {getInitials(displayName)} + + + ) : ( + + )} + + ) : ( + + + ); + }); +} + +// this is the original VideoSplit function from the baseline composition +// +function VideoSplit(props) { const { participantDescs = [], margin_gu = 0, splitDirection, - zoomFactors, + currentLayout, } = props; // Make sure we have exactly one or two boxes const totalItems = Math.max(1, Math.min(participantDescs.length, 2)); @@ -19,16 +295,16 @@ export default function VideoSplit(props) { default: layoutFn = layoutFuncs.splitAcrossLongerDimension; break; - case 'horizontal': + case "horizontal": layoutFn = layoutFuncs.splitHorizontal; break; - case 'vertical': + case "vertical": layoutFn = layoutFuncs.splitVertical; break; } function makeItem(itemIdx) { - const key = 'videosplit_item' + itemIdx; + const key = "videosplit_item" + itemIdx; const participant = participantDescs[itemIdx]; // override point for custom decorations on split videos. @@ -39,9 +315,9 @@ export default function VideoSplit(props) { participant, props ); - - const zoom = - zoomFactors[itemIdx] != null ? parseFloat(zoomFactors[itemIdx]) : 1; + const fillStyle = { + fillColor: pauseBgColor, + }; return ( @@ -66,3 +342,25 @@ export default function VideoSplit(props) { return {[makeItem(0), makeItem(1)]}; } } + +function VideoSingleCustom(props) { + let { participantDescs = [] } = props; + + const participant = participantDescs[0]; + const { videoId, paused, isScreenshare } = participant || {}; + const fillStyle = { + fillColor: pauseBgColor, + }; + + return paused ? ( + + ) : ( + + + ); +} diff --git a/compositions/daily-baseline/params.js b/compositions/daily-baseline/params.js index 1726eb73..ce6b3abd 100644 --- a/compositions/daily-baseline/params.js +++ b/compositions/daily-baseline/params.js @@ -4,190 +4,196 @@ import { fontFamilies, fontFamilies_smallSizeFriendly, fontWeights, -} from './constants.js'; +} from "./constants.js"; export const compositionParams = [ // -- composition's video layout mode -- { - id: 'mode', - type: 'enum', - defaultValue: 'grid', - values: ['single', 'split', 'grid', 'dominant', 'pip'], + id: "mode", + type: "enum", + defaultValue: "grid", + values: ["single", "split", "grid", "dominant", "pip"], }, { - id: 'showTextOverlay', - type: 'boolean', + id: "currentLayout", + type: "enum", + defaultValue: "2x2", + values: ["2x2", "2x1"], + }, + { + id: "showTextOverlay", + type: "boolean", defaultValue: false, }, { - id: 'showImageOverlay', - type: 'boolean', + id: "showImageOverlay", + type: "boolean", defaultValue: false, }, { - id: 'showBannerOverlay', - type: 'boolean', + id: "showBannerOverlay", + type: "boolean", defaultValue: false, }, { - id: 'showWebFrameOverlay', - type: 'boolean', + id: "showWebFrameOverlay", + type: "boolean", defaultValue: false, }, { - id: 'showSidebar', - type: 'boolean', + id: "showSidebar", + type: "boolean", defaultValue: false, }, { - id: 'showTitleSlate', - type: 'boolean', + id: "showTitleSlate", + type: "boolean", defaultValue: false, }, { - id: 'enableAutoOpeningSlate', - type: 'boolean', + id: "enableAutoOpeningSlate", + type: "boolean", defaultValue: false, shortHelpText: - 'Shown immediately when stream starts. Goes away automatically.\nTo preview this slate, click Stop, then Restart.', + "Shown immediately when stream starts. Goes away automatically.\nTo preview this slate, click Stop, then Restart.", }, // -- video layout params -- { - id: 'videoSettings.maxCamStreams', - type: 'number', + id: "videoSettings.maxCamStreams", + type: "number", defaultValue: 25, shortHelpText: - 'Limits the number of non-screenshare streams that are included in the output.', + "Limits the number of non-screenshare streams that are included in the output.", }, { - id: 'videoSettings.preferredParticipantIds', - type: 'text', - defaultValue: '', + id: "videoSettings.preferredParticipantIds", + type: "text", + defaultValue: "", }, { - id: 'videoSettings.preferScreenshare', - type: 'boolean', + id: "videoSettings.preferScreenshare", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.omitPausedVideo', - type: 'boolean', + id: "videoSettings.omitPausedVideo", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.omitAudioOnly', - type: 'boolean', + id: "videoSettings.omitAudioOnly", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.omitExtraScreenshares', - type: 'boolean', + id: "videoSettings.omitExtraScreenshares", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.filterForUnpausedMediaTypes', - type: 'text', - defaultValue: '', + id: "videoSettings.filterForUnpausedMediaTypes", + type: "text", + defaultValue: "", }, { - id: 'videoSettings.showParticipantLabels', - type: 'boolean', + id: "videoSettings.showParticipantLabels", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.roundedCorners', - type: 'boolean', + id: "videoSettings.roundedCorners", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.cornerRadius_gu', - type: 'number', + id: "videoSettings.cornerRadius_gu", + type: "number", defaultValue: 1.2, step: 0.1, }, { - id: 'videoSettings.scaleMode', - type: 'enum', - defaultValue: 'fill', - values: ['fill', 'fit'], + id: "videoSettings.scaleMode", + type: "enum", + defaultValue: "fill", + values: ["fill", "fit"], }, { - id: 'videoSettings.scaleModeForScreenshare', - type: 'enum', - defaultValue: 'fit', - values: ['fill', 'fit'], + id: "videoSettings.scaleModeForScreenshare", + type: "enum", + defaultValue: "fit", + values: ["fill", "fit"], }, { - id: 'videoSettings.zoomFactorsList', - type: 'text', - defaultValue: '', + id: "videoSettings.zoomFactorsList", + type: "text", + defaultValue: "", experimental: true, }, { - id: 'videoSettings.placeholder.bgColor', - type: 'text', - defaultValue: 'rgb(0, 50, 80)', + id: "videoSettings.placeholder.bgColor", + type: "text", + defaultValue: "rgb(0, 50, 80)", }, { - id: 'videoSettings.highlight.color', - type: 'text', - defaultValue: 'rgb(255, 255, 255)', + id: "videoSettings.highlight.color", + type: "text", + defaultValue: "rgb(255, 255, 255)", }, { - id: 'videoSettings.highlight.stroke_gu', - type: 'number', + id: "videoSettings.highlight.stroke_gu", + type: "number", defaultValue: 0.2, step: 0.05, }, { - id: 'videoSettings.split.margin_gu', - type: 'number', + id: "videoSettings.split.margin_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'videoSettings.split.direction', - type: 'enum', - defaultValue: 'auto-by-viewport', - values: ['auto-by-viewport', 'vertical', 'horizontal'], + id: "videoSettings.split.direction", + type: "enum", + defaultValue: "auto-by-viewport", + values: ["auto-by-viewport", "vertical", "horizontal"], }, { - id: 'videoSettings.grid.useDominantForSharing', - type: 'boolean', + id: "videoSettings.grid.useDominantForSharing", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.grid.itemInterval_gu', - type: 'number', + id: "videoSettings.grid.itemInterval_gu", + type: "number", defaultValue: -1, step: 0.1, }, { - id: 'videoSettings.grid.outerPadding_gu', - type: 'number', + id: "videoSettings.grid.outerPadding_gu", + type: "number", defaultValue: -1, step: 0.1, }, { - id: 'videoSettings.grid.highlightDominant', - type: 'boolean', + id: "videoSettings.grid.highlightDominant", + type: "boolean", defaultValue: true, }, { - id: 'videoSettings.grid.preserveAspectRatio', - type: 'boolean', + id: "videoSettings.grid.preserveAspectRatio", + type: "boolean", defaultValue: true, }, { - id: 'videoSettings.grid.fullScreenHighlightItemIndex', - type: 'number', + id: "videoSettings.grid.fullScreenHighlightItemIndex", + type: "number", defaultValue: -1, step: 1, }, { - id: 'videoSettings.dominant.position', - type: 'enum', + id: "videoSettings.dominant.position", + type: "enum", defaultValue: PositionEdge.LEFT, values: Object.values(PositionEdge), }, @@ -197,81 +203,81 @@ export const compositionParams = [ defaultValue: false, }, { - id: 'videoSettings.dominant.splitPos', - type: 'number', + id: "videoSettings.dominant.splitPos", + type: "number", defaultValue: 0.8, step: 0.1, }, { - id: 'videoSettings.dominant.numChiclets', - type: 'number', + id: "videoSettings.dominant.numChiclets", + type: "number", defaultValue: 5, }, { - id: 'videoSettings.dominant.followDomFlag', - type: 'boolean', + id: "videoSettings.dominant.followDomFlag", + type: "boolean", defaultValue: true, }, { - id: 'videoSettings.dominant.itemInterval_gu', - type: 'number', + id: "videoSettings.dominant.itemInterval_gu", + type: "number", defaultValue: 0.7, step: 0.1, }, { - id: 'videoSettings.dominant.outerPadding_gu', - type: 'number', + id: "videoSettings.dominant.outerPadding_gu", + type: "number", defaultValue: 0.5, step: 0.1, }, { - id: 'videoSettings.dominant.splitMargin_gu', - type: 'number', + id: "videoSettings.dominant.splitMargin_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'videoSettings.dominant.sharpCornersOnMain', - type: 'boolean', + id: "videoSettings.dominant.sharpCornersOnMain", + type: "boolean", defaultValue: true, }, { - id: 'videoSettings.dominant.includeWebFrame', - type: 'boolean', + id: "videoSettings.dominant.includeWebFrame", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.pip.position', - type: 'enum', + id: "videoSettings.pip.position", + type: "enum", defaultValue: PositionCorner.TOP_RIGHT, values: Object.values(PositionCorner), }, { - id: 'videoSettings.pip.aspectRatio', - type: 'number', + id: "videoSettings.pip.aspectRatio", + type: "number", defaultValue: 1, step: 0.1, }, { - id: 'videoSettings.pip.height_gu', - type: 'number', + id: "videoSettings.pip.height_gu", + type: "number", defaultValue: 12, step: 1, }, { - id: 'videoSettings.pip.margin_gu', - type: 'number', + id: "videoSettings.pip.margin_gu", + type: "number", defaultValue: 1.5, step: 0.1, }, { - id: 'videoSettings.pip.followDomFlag', - type: 'boolean', + id: "videoSettings.pip.followDomFlag", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.pip.sharpCornersOnMain', - type: 'boolean', + id: "videoSettings.pip.sharpCornersOnMain", + type: "boolean", defaultValue: true, }, { @@ -286,834 +292,834 @@ export const compositionParams = [ values: fontFamilies_smallSizeFriendly, }, { - id: 'videoSettings.labels.fontWeight', - type: 'enum', - defaultValue: '600', + id: "videoSettings.labels.fontWeight", + type: "enum", + defaultValue: "600", values: fontWeights, }, { - id: 'videoSettings.labels.fontSize_pct', - type: 'number', + id: "videoSettings.labels.fontSize_pct", + type: "number", defaultValue: 100, }, { - id: 'videoSettings.labels.offset_x_gu', - type: 'number', + id: "videoSettings.labels.offset_x_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'videoSettings.labels.offset_y_gu', - type: 'number', + id: "videoSettings.labels.offset_y_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'videoSettings.labels.color', - type: 'text', - defaultValue: 'white', + id: "videoSettings.labels.color", + type: "text", + defaultValue: "white", }, { - id: 'videoSettings.labels.strokeColor', - type: 'text', - defaultValue: 'rgba(0, 0, 0, 0.9)', + id: "videoSettings.labels.strokeColor", + type: "text", + defaultValue: "rgba(0, 0, 0, 0.9)", }, { - id: 'videoSettings.margin.left_gu', - type: 'number', + id: "videoSettings.margin.left_gu", + type: "number", defaultValue: 0, step: 1, }, { - id: 'videoSettings.margin.right_gu', - type: 'number', + id: "videoSettings.margin.right_gu", + type: "number", defaultValue: 0, step: 1, }, { - id: 'videoSettings.margin.top_gu', - type: 'number', + id: "videoSettings.margin.top_gu", + type: "number", defaultValue: 0, step: 1, }, { - id: 'videoSettings.margin.bottom_gu', - type: 'number', + id: "videoSettings.margin.bottom_gu", + type: "number", defaultValue: 0, step: 1, }, // -- text overlay params -- { - id: 'text.content', - type: 'text', - defaultValue: 'An example text overlay', + id: "text.content", + type: "text", + defaultValue: "An example text overlay", //'An example text overlay\nwith line breaks\nThis third line is very long dolor sit amet lorem ipsum, and the line ends here.', }, { - id: 'text.source', - type: 'enum', - defaultValue: 'param', - values: ['param', 'highlightLines.items', 'chatMessages', 'transcript'], + id: "text.source", + type: "enum", + defaultValue: "param", + values: ["param", "highlightLines.items", "chatMessages", "transcript"], shortHelpText: - 'Override the text content from a standard source like transcription.', + "Override the text content from a standard source like transcription.", }, { - id: 'text.align_horizontal', - type: 'enum', - defaultValue: 'center', - values: ['left', 'right', 'center'], + id: "text.align_horizontal", + type: "enum", + defaultValue: "center", + values: ["left", "right", "center"], }, { - id: 'text.align_vertical', - type: 'enum', - defaultValue: 'center', - values: ['top', 'bottom', 'center'], + id: "text.align_vertical", + type: "enum", + defaultValue: "center", + values: ["top", "bottom", "center"], }, { - id: 'text.offset_x_gu', - type: 'number', + id: "text.offset_x_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'text.offset_y_gu', - type: 'number', + id: "text.offset_y_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'text.scale_x', - type: 'number', + id: "text.scale_x", + type: "number", defaultValue: 1, step: 0.1, }, { - id: 'text.rotation_deg', - type: 'number', + id: "text.rotation_deg", + type: "number", defaultValue: 0, }, { - id: 'text.fontFamily', - type: 'enum', - defaultValue: 'DMSans', + id: "text.fontFamily", + type: "enum", + defaultValue: "DMSans", values: fontFamilies, }, { - id: 'text.fontWeight', - type: 'enum', - defaultValue: '400', + id: "text.fontWeight", + type: "enum", + defaultValue: "400", values: fontWeights, }, { - id: 'text.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "text.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, { - id: 'text.fontSize_gu', - type: 'number', + id: "text.fontSize_gu", + type: "number", defaultValue: 2.5, step: 0.1, }, { - id: 'text.color', - type: 'text', - defaultValue: 'rgba(255, 250, 200, 0.95)', + id: "text.color", + type: "text", + defaultValue: "rgba(255, 250, 200, 0.95)", }, { - id: 'text.strokeColor', - type: 'text', - defaultValue: 'rgba(0, 0, 0, 0.8)', + id: "text.strokeColor", + type: "text", + defaultValue: "rgba(0, 0, 0, 0.8)", }, { - id: 'text.stroke_gu', - type: 'number', + id: "text.stroke_gu", + type: "number", defaultValue: 0.5, step: 0.05, }, { - id: 'text.highlight.color', - type: 'text', - defaultValue: 'rgba(255, 255, 0, 1)', + id: "text.highlight.color", + type: "text", + defaultValue: "rgba(255, 255, 0, 1)", }, { - id: 'text.highlight.fontWeight', - type: 'enum', - defaultValue: '700', + id: "text.highlight.fontWeight", + type: "enum", + defaultValue: "700", values: fontWeights, }, // -- image overlay params -- { - id: 'image.assetName', - type: 'text', - defaultValue: 'overlay.png', + id: "image.assetName", + type: "text", + defaultValue: "overlay.png", }, { - id: 'image.emoji', - type: 'text', - defaultValue: '', + id: "image.emoji", + type: "text", + defaultValue: "", shortHelpText: - 'Set this value to use a single emoji instead of an image asset.', + "Set this value to use a single emoji instead of an image asset.", }, { - id: 'image.position', - type: 'enum', + id: "image.position", + type: "enum", defaultValue: PositionCorner.TOP_RIGHT, values: Object.values(PositionCorner), }, { - id: 'image.zPosition', - type: 'enum', - defaultValue: 'foreground', - values: ['foreground', 'background'], + id: "image.zPosition", + type: "enum", + defaultValue: "foreground", + values: ["foreground", "background"], }, { - id: 'image.fullScreen', - type: 'boolean', + id: "image.fullScreen", + type: "boolean", defaultValue: false, }, { - id: 'image.fullScreenScaleMode', - type: 'enum', - defaultValue: 'fit', - values: ['fill', 'fit'], + id: "image.fullScreenScaleMode", + type: "enum", + defaultValue: "fit", + values: ["fill", "fit"], }, { - id: 'image.aspectRatio', - type: 'number', + id: "image.aspectRatio", + type: "number", defaultValue: 1.778, step: 0.1, }, { - id: 'image.height_gu', - type: 'number', + id: "image.height_gu", + type: "number", defaultValue: 12, step: 1, }, { - id: 'image.margin_gu', - type: 'number', + id: "image.margin_gu", + type: "number", defaultValue: 1.5, step: 0.1, }, { - id: 'image.opacity', - type: 'number', + id: "image.opacity", + type: "number", defaultValue: 1, step: 0.1, }, { - id: 'image.enableFade', - type: 'boolean', + id: "image.enableFade", + type: "boolean", defaultValue: true, }, // -- webframe overlay params -- { - id: 'webFrame.url', - type: 'text', - defaultValue: '', + id: "webFrame.url", + type: "text", + defaultValue: "", }, { - id: 'webFrame.viewportWidth_px', - type: 'number', + id: "webFrame.viewportWidth_px", + type: "number", defaultValue: 1280, step: 1, }, { - id: 'webFrame.viewportHeight_px', - type: 'number', + id: "webFrame.viewportHeight_px", + type: "number", defaultValue: 720, step: 1, }, { - id: 'webFrame.position', - type: 'enum', + id: "webFrame.position", + type: "enum", defaultValue: PositionCorner.TOP_RIGHT, values: Object.values(PositionCorner), }, { - id: 'webFrame.zPosition', - type: 'enum', - defaultValue: 'foreground', - values: ['foreground', 'background'], + id: "webFrame.zPosition", + type: "enum", + defaultValue: "foreground", + values: ["foreground", "background"], }, { - id: 'webFrame.fullScreen', - type: 'boolean', + id: "webFrame.fullScreen", + type: "boolean", defaultValue: false, }, { - id: 'webFrame.height_gu', - type: 'number', + id: "webFrame.height_gu", + type: "number", defaultValue: 12, step: 1, }, { - id: 'webFrame.margin_gu', - type: 'number', + id: "webFrame.margin_gu", + type: "number", defaultValue: 1.5, step: 0.1, }, { - id: 'webFrame.opacity', - type: 'number', + id: "webFrame.opacity", + type: "number", defaultValue: 1, step: 0.1, }, { - id: 'webFrame.enableFade', - type: 'boolean', + id: "webFrame.enableFade", + type: "boolean", defaultValue: true, }, { - id: 'webFrame.keyPress.keyName', - type: 'text', - defaultValue: 'ArrowRight', + id: "webFrame.keyPress.keyName", + type: "text", + defaultValue: "ArrowRight", }, { - id: 'webFrame.keyPress.modifiers', - type: 'text', - defaultValue: '', + id: "webFrame.keyPress.modifiers", + type: "text", + defaultValue: "", }, { - id: 'webFrame.keyPress.key', - type: 'number', + id: "webFrame.keyPress.key", + type: "number", defaultValue: 0, shortHelpText: "To send a keyboard press, increment the value of 'key'", }, // -- lower third params -- { - id: 'banner.title', - type: 'text', - defaultValue: 'Hello world', + id: "banner.title", + type: "text", + defaultValue: "Hello world", }, { - id: 'banner.subtitle', - type: 'text', - defaultValue: 'This is an example subtitle', + id: "banner.subtitle", + type: "text", + defaultValue: "This is an example subtitle", }, { - id: 'banner.source', - type: 'enum', - defaultValue: 'param', - values: ['param', 'highlightLines.items', 'chatMessages', 'transcript'], + id: "banner.source", + type: "enum", + defaultValue: "param", + values: ["param", "highlightLines.items", "chatMessages", "transcript"], shortHelpText: - 'Override this content from a standard source like transcription.', + "Override this content from a standard source like transcription.", }, { - id: 'banner.position', - type: 'enum', + id: "banner.position", + type: "enum", defaultValue: PositionCorner.BOTTOM_LEFT, values: Object.values(PositionCorner), }, { - id: 'banner.enableTransition', - type: 'boolean', + id: "banner.enableTransition", + type: "boolean", defaultValue: true, }, { - id: 'banner.margin_x_gu', - type: 'number', + id: "banner.margin_x_gu", + type: "number", defaultValue: 0, step: 0.5, }, { - id: 'banner.margin_y_gu', - type: 'number', + id: "banner.margin_y_gu", + type: "number", defaultValue: 1, step: 0.5, }, { - id: 'banner.padding_gu', - type: 'number', + id: "banner.padding_gu", + type: "number", defaultValue: 2, step: 0.1, }, { - id: 'banner.alwaysUseMaxW', - type: 'boolean', + id: "banner.alwaysUseMaxW", + type: "boolean", defaultValue: false, }, { - id: 'banner.maxW_pct_default', - type: 'number', + id: "banner.maxW_pct_default", + type: "number", defaultValue: 65, }, { - id: 'banner.maxW_pct_portrait', - type: 'number', + id: "banner.maxW_pct_portrait", + type: "number", defaultValue: 90, }, { - id: 'banner.rotation_deg', - type: 'number', + id: "banner.rotation_deg", + type: "number", defaultValue: 0, }, { - id: 'banner.cornerRadius_gu', - type: 'number', + id: "banner.cornerRadius_gu", + type: "number", defaultValue: 0, step: 0.1, }, { - id: 'banner.showIcon', - type: 'boolean', + id: "banner.showIcon", + type: "boolean", defaultValue: true, }, { - id: 'banner.icon.assetName', - type: 'text', - defaultValue: '', + id: "banner.icon.assetName", + type: "text", + defaultValue: "", }, { - id: 'banner.icon.emoji', - type: 'text', - defaultValue: '🎉', + id: "banner.icon.emoji", + type: "text", + defaultValue: "🎉", shortHelpText: - 'Set this value to use a single emoji instead of an image asset as the icon.', + "Set this value to use a single emoji instead of an image asset as the icon.", }, { - id: 'banner.icon.size_gu', - type: 'number', + id: "banner.icon.size_gu", + type: "number", defaultValue: 3, }, { - id: 'banner.color', - type: 'text', - defaultValue: 'rgba(50, 60, 200, 0.9)', + id: "banner.color", + type: "text", + defaultValue: "rgba(50, 60, 200, 0.9)", }, { - id: 'banner.strokeColor', - type: 'text', - defaultValue: 'rgba(0, 0, 30, 0.44)', + id: "banner.strokeColor", + type: "text", + defaultValue: "rgba(0, 0, 30, 0.44)", }, { - id: 'banner.stroke_gu', - type: 'number', + id: "banner.stroke_gu", + type: "number", defaultValue: 0, step: 0.05, }, { - id: 'banner.text.color', - type: 'text', - defaultValue: 'white', + id: "banner.text.color", + type: "text", + defaultValue: "white", }, { - id: 'banner.text.strokeColor', - type: 'text', - defaultValue: 'rgba(0, 0, 0, 0.1)', + id: "banner.text.strokeColor", + type: "text", + defaultValue: "rgba(0, 0, 0, 0.1)", }, { - id: 'banner.text.stroke_gu', - type: 'number', + id: "banner.text.stroke_gu", + type: "number", defaultValue: 0.5, step: 0.05, }, { - id: 'banner.text.fontFamily', - type: 'enum', - defaultValue: 'Roboto', + id: "banner.text.fontFamily", + type: "enum", + defaultValue: "Roboto", values: fontFamilies, }, { - id: 'banner.title.fontSize_gu', - type: 'number', + id: "banner.title.fontSize_gu", + type: "number", defaultValue: 2, step: 0.1, }, { - id: 'banner.title.fontWeight', - type: 'enum', - defaultValue: '500', + id: "banner.title.fontWeight", + type: "enum", + defaultValue: "500", values: fontWeights, }, { - id: 'banner.title.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "banner.title.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, { - id: 'banner.subtitle.fontSize_gu', - type: 'number', + id: "banner.subtitle.fontSize_gu", + type: "number", defaultValue: 1.5, step: 0.1, }, { - id: 'banner.subtitle.fontWeight', - type: 'enum', - defaultValue: '300', + id: "banner.subtitle.fontWeight", + type: "enum", + defaultValue: "300", values: fontWeights, }, { - id: 'banner.subtitle.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "banner.subtitle.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, // -- toast params -- { - id: 'toast.key', - type: 'number', + id: "toast.key", + type: "number", defaultValue: 0, shortHelpText: "To send a toast, increment the value of 'key'", }, { - id: 'toast.text', - type: 'text', - defaultValue: 'Hello world', + id: "toast.text", + type: "text", + defaultValue: "Hello world", }, { - id: 'toast.source', - type: 'enum', - defaultValue: 'param', - values: ['param', 'chatMessages', 'transcript'], + id: "toast.source", + type: "enum", + defaultValue: "param", + values: ["param", "chatMessages", "transcript"], shortHelpText: - 'Override this content from a standard source like transcription.', + "Override this content from a standard source like transcription.", }, { - id: 'toast.duration_secs', - type: 'number', + id: "toast.duration_secs", + type: "number", defaultValue: 4, }, { - id: 'toast.maxW_pct_default', - type: 'number', + id: "toast.maxW_pct_default", + type: "number", defaultValue: 50, }, { - id: 'toast.maxW_pct_portrait', - type: 'number', + id: "toast.maxW_pct_portrait", + type: "number", defaultValue: 80, }, { - id: 'toast.showIcon', - type: 'boolean', + id: "toast.showIcon", + type: "boolean", defaultValue: true, }, { - id: 'toast.icon.assetName', - type: 'text', - defaultValue: '', + id: "toast.icon.assetName", + type: "text", + defaultValue: "", }, { - id: 'toast.icon.emoji', - type: 'text', - defaultValue: '🎉', + id: "toast.icon.emoji", + type: "text", + defaultValue: "🎉", shortHelpText: - 'Set this value to use a single emoji instead of an image asset as the icon.', + "Set this value to use a single emoji instead of an image asset as the icon.", }, { - id: 'toast.icon.size_gu', - type: 'number', + id: "toast.icon.size_gu", + type: "number", defaultValue: 3, }, { - id: 'toast.color', - type: 'text', - defaultValue: 'rgba(15, 50, 110, 0.6)', + id: "toast.color", + type: "text", + defaultValue: "rgba(15, 50, 110, 0.6)", }, { - id: 'toast.strokeColor', - type: 'text', - defaultValue: 'rgba(0, 0, 30, 0.44)', + id: "toast.strokeColor", + type: "text", + defaultValue: "rgba(0, 0, 30, 0.44)", }, { - id: 'toast.text.color', - type: 'text', - defaultValue: 'white', + id: "toast.text.color", + type: "text", + defaultValue: "white", }, { - id: 'toast.text.fontFamily', - type: 'enum', + id: "toast.text.fontFamily", + type: "enum", defaultValue: fontFamilies_smallSizeFriendly[0], values: fontFamilies_smallSizeFriendly, }, { - id: 'toast.text.fontWeight', - type: 'enum', - defaultValue: '500', + id: "toast.text.fontWeight", + type: "enum", + defaultValue: "500", values: fontWeights, }, { - id: 'toast.text.fontSize_pct', - type: 'number', + id: "toast.text.fontSize_pct", + type: "number", defaultValue: 100, }, // -- opening slate (a.k.a. start titles) params -- { - id: 'openingSlate.duration_secs', - type: 'number', + id: "openingSlate.duration_secs", + type: "number", defaultValue: 4, shortHelpText: - 'The slate is shown for this amount of time when the stream starts.', + "The slate is shown for this amount of time when the stream starts.", }, { - id: 'openingSlate.title', - type: 'text', - defaultValue: 'Welcome', + id: "openingSlate.title", + type: "text", + defaultValue: "Welcome", }, { - id: 'openingSlate.subtitle', - type: 'text', - defaultValue: '', + id: "openingSlate.subtitle", + type: "text", + defaultValue: "", }, { - id: 'openingSlate.bgImageAssetName', - type: 'text', - defaultValue: '', + id: "openingSlate.bgImageAssetName", + type: "text", + defaultValue: "", }, { - id: 'openingSlate.bgColor', - type: 'text', - defaultValue: 'rgba(0, 0, 0, 1)', + id: "openingSlate.bgColor", + type: "text", + defaultValue: "rgba(0, 0, 0, 1)", }, { - id: 'openingSlate.textColor', - type: 'text', - defaultValue: 'rgba(255, 255, 255, 1)', + id: "openingSlate.textColor", + type: "text", + defaultValue: "rgba(255, 255, 255, 1)", }, { - id: 'openingSlate.fontFamily', - type: 'enum', - defaultValue: 'Bitter', + id: "openingSlate.fontFamily", + type: "enum", + defaultValue: "Bitter", values: fontFamilies, }, { - id: 'openingSlate.fontWeight', - type: 'enum', - defaultValue: '500', + id: "openingSlate.fontWeight", + type: "enum", + defaultValue: "500", values: fontWeights, }, { - id: 'openingSlate.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "openingSlate.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, { - id: 'openingSlate.fontSize_gu', - type: 'number', + id: "openingSlate.fontSize_gu", + type: "number", defaultValue: 2.5, step: 0.1, }, { - id: 'openingSlate.subtitle.fontSize_pct', - type: 'number', + id: "openingSlate.subtitle.fontSize_pct", + type: "number", defaultValue: 75, step: 1, }, { - id: 'openingSlate.subtitle.fontWeight', - type: 'enum', - defaultValue: '400', + id: "openingSlate.subtitle.fontWeight", + type: "enum", + defaultValue: "400", values: fontWeights, }, // -- title slate params -- { - id: 'titleSlate.enableTransition', - type: 'boolean', + id: "titleSlate.enableTransition", + type: "boolean", defaultValue: true, }, { - id: 'titleSlate.title', - type: 'text', - defaultValue: 'Title slate', + id: "titleSlate.title", + type: "text", + defaultValue: "Title slate", }, { - id: 'titleSlate.subtitle', - type: 'text', - defaultValue: 'Subtitle', + id: "titleSlate.subtitle", + type: "text", + defaultValue: "Subtitle", }, { - id: 'titleSlate.bgImageAssetName', - type: 'text', - defaultValue: '', + id: "titleSlate.bgImageAssetName", + type: "text", + defaultValue: "", }, { - id: 'titleSlate.bgColor', - type: 'text', - defaultValue: 'rgba(0, 0, 0, 1)', + id: "titleSlate.bgColor", + type: "text", + defaultValue: "rgba(0, 0, 0, 1)", }, { - id: 'titleSlate.textColor', - type: 'text', - defaultValue: 'rgba(255, 255, 255, 1)', + id: "titleSlate.textColor", + type: "text", + defaultValue: "rgba(255, 255, 255, 1)", }, { - id: 'titleSlate.fontFamily', - type: 'enum', - defaultValue: 'Bitter', + id: "titleSlate.fontFamily", + type: "enum", + defaultValue: "Bitter", values: fontFamilies, }, { - id: 'titleSlate.fontWeight', - type: 'enum', - defaultValue: '500', + id: "titleSlate.fontWeight", + type: "enum", + defaultValue: "500", values: fontWeights, }, { - id: 'titleSlate.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "titleSlate.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, { - id: 'titleSlate.fontSize_gu', - type: 'number', + id: "titleSlate.fontSize_gu", + type: "number", defaultValue: 2.5, step: 0.1, }, { - id: 'titleSlate.subtitle.fontSize_pct', - type: 'number', + id: "titleSlate.subtitle.fontSize_pct", + type: "number", defaultValue: 75, step: 1, }, { - id: 'titleSlate.subtitle.fontWeight', - type: 'enum', - defaultValue: '400', + id: "titleSlate.subtitle.fontWeight", + type: "enum", + defaultValue: "400", values: fontWeights, }, // -- sidebar params -- { - id: 'sidebar.shrinkVideoLayout', - type: 'boolean', + id: "sidebar.shrinkVideoLayout", + type: "boolean", defaultValue: false, }, { - id: 'sidebar.source', - type: 'enum', - defaultValue: 'highlightLines.items', - values: ['highlightLines.items', 'chatMessages', 'transcript'], - shortHelpText: 'Choose where the sidebar gets its content.', + id: "sidebar.source", + type: "enum", + defaultValue: "highlightLines.items", + values: ["highlightLines.items", "chatMessages", "transcript"], + shortHelpText: "Choose where the sidebar gets its content.", }, { - id: 'sidebar.padding_gu', - type: 'number', + id: "sidebar.padding_gu", + type: "number", defaultValue: 1.5, step: 0.1, }, { - id: 'sidebar.width_pct_landscape', - type: 'number', + id: "sidebar.width_pct_landscape", + type: "number", defaultValue: 30, }, { - id: 'sidebar.height_pct_portrait', - type: 'number', + id: "sidebar.height_pct_portrait", + type: "number", defaultValue: 25, shortHelpText: - 'The sidebar is displayed at the bottom when the output size is portrait or square. This param sets its height in that mode.', + "The sidebar is displayed at the bottom when the output size is portrait or square. This param sets its height in that mode.", }, { - id: 'sidebar.bgColor', - type: 'text', - defaultValue: 'rgba(0, 0, 50, 0.55)', + id: "sidebar.bgColor", + type: "text", + defaultValue: "rgba(0, 0, 50, 0.55)", }, { - id: 'sidebar.textColor', - type: 'text', - defaultValue: 'rgba(255, 255, 255, 0.94)', + id: "sidebar.textColor", + type: "text", + defaultValue: "rgba(255, 255, 255, 0.94)", }, { - id: 'sidebar.fontFamily', - type: 'enum', - defaultValue: 'DMSans', + id: "sidebar.fontFamily", + type: "enum", + defaultValue: "DMSans", values: fontFamilies, }, { - id: 'sidebar.fontWeight', - type: 'enum', - defaultValue: '300', + id: "sidebar.fontWeight", + type: "enum", + defaultValue: "300", values: fontWeights, }, { - id: 'sidebar.fontStyle', - type: 'enum', - defaultValue: '', - values: ['normal', 'italic'], + id: "sidebar.fontStyle", + type: "enum", + defaultValue: "", + values: ["normal", "italic"], }, { - id: 'sidebar.fontSize_gu', - type: 'number', + id: "sidebar.fontSize_gu", + type: "number", defaultValue: 1.4, step: 0.1, }, { - id: 'sidebar.textHighlight.color', - type: 'text', - defaultValue: 'rgba(255, 230, 0, 1)', + id: "sidebar.textHighlight.color", + type: "text", + defaultValue: "rgba(255, 230, 0, 1)", }, { - id: 'sidebar.textHighlight.fontWeight', - type: 'enum', - defaultValue: '600', + id: "sidebar.textHighlight.fontWeight", + type: "enum", + defaultValue: "600", values: fontWeights, }, // -- highlightLines params -- { - id: 'highlightLines.items', - type: 'text', - textSizeHint: 'long', + id: "highlightLines.items", + type: "text", + textSizeHint: "long", defaultValue: - 'Introduction\nNotes from the conference\nInterview with Jane Doe\nQ & A', + "Introduction\nNotes from the conference\nInterview with Jane Doe\nQ & A", shortHelpText: 'To display the data configured here, set the "source" param available on components like TextOverlay, Banner and Sidebar.', }, { - id: 'highlightLines.position', - type: 'number', + id: "highlightLines.position", + type: "number", defaultValue: 0, - shortHelpText: 'To remove the highlight, set position to -1.', + shortHelpText: "To remove the highlight, set position to -1.", }, // -- emoji reactions params -- { - id: 'emojiReactions.source', - type: 'enum', - defaultValue: 'emojiReactions', - values: ['emojiReactions', 'param'], + id: "emojiReactions.source", + type: "enum", + defaultValue: "emojiReactions", + values: ["emojiReactions", "param"], shortHelpText: "To send a reaction using param values instead of the standard source, set this to 'param', set 'emoji' below, and increment the value of 'key'.", }, { - id: 'emojiReactions.key', - type: 'number', + id: "emojiReactions.key", + type: "number", defaultValue: 0, }, { - id: 'emojiReactions.emoji', - type: 'text', - defaultValue: '', + id: "emojiReactions.emoji", + type: "text", + defaultValue: "", }, { - id: 'emojiReactions.offset_x_gu', - type: 'number', + id: "emojiReactions.offset_x_gu", + type: "number", defaultValue: 0, step: 1, }, // -- debug params -- { - id: 'debug.showRoomState', - type: 'boolean', + id: "debug.showRoomState", + type: "boolean", defaultValue: false, }, { - id: 'debug.overlayOpacity', - type: 'number', + id: "debug.overlayOpacity", + type: "number", defaultValue: 90, step: 1, }, From 965ee69d5ed66e27f468a8c68c1b29f7ec4d9874 Mon Sep 17 00:00:00 2001 From: James Hush Date: Wed, 22 May 2024 17:18:28 +0200 Subject: [PATCH 2/5] Remove style changes --- compositions/daily-baseline/params.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/compositions/daily-baseline/params.js b/compositions/daily-baseline/params.js index ce6b3abd..e9000394 100644 --- a/compositions/daily-baseline/params.js +++ b/compositions/daily-baseline/params.js @@ -198,8 +198,8 @@ export const compositionParams = [ values: Object.values(PositionEdge), }, { - id: 'videoSettings.dominant.centerItems', - type: 'boolean', + id: "videoSettings.dominant.centerItems", + type: "boolean", defaultValue: false, }, { @@ -281,13 +281,13 @@ export const compositionParams = [ defaultValue: true, }, { - id: 'videoSettings.pip.includeWebFrame', - type: 'boolean', + id: "videoSettings.pip.includeWebFrame", + type: "boolean", defaultValue: false, }, { - id: 'videoSettings.labels.fontFamily', - type: 'enum', + id: "videoSettings.labels.fontFamily", + type: "enum", defaultValue: fontFamilies_smallSizeFriendly[0], values: fontFamilies_smallSizeFriendly, }, From 0b4189d4351c6c395052f1f55d0167f1242d0257 Mon Sep 17 00:00:00 2001 From: James Hush Date: Mon, 3 Jun 2024 14:45:13 +0200 Subject: [PATCH 3/5] Add debugging --- .../daily-baseline/components/VideoSplit.js | 97 +++++++++++-------- compositions/daily-baseline/params.js | 2 +- 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/compositions/daily-baseline/components/VideoSplit.js b/compositions/daily-baseline/components/VideoSplit.js index 24674382..9f79231d 100644 --- a/compositions/daily-baseline/components/VideoSplit.js +++ b/compositions/daily-baseline/components/VideoSplit.js @@ -12,10 +12,18 @@ import { RoomContext } from "#vcs-react/contexts"; const textSize_gu = 1; const headerH_gu = textSize_gu * 10; - let primaryColor; let pauseBgColor; +function header(parentFrame, params, layoutCtx) { + let { x, y, w, h } = parentFrame; + const pxPerGu = layoutCtx.pixelsPerGridUnit; + + h = headerH_gu * pxPerGu; + + return { x, y, w, h }; +} + function body(parentFrame, params, layoutCtx) { let { x, y, w, h } = parentFrame; const pxPerGu = layoutCtx.pixelsPerGridUnit; @@ -34,17 +42,19 @@ export default function AugmentedSplit(props) { const currentLayout = params["currentLayout"]; primaryColor = params["voedaily.primary.color"]; pauseBgColor = params["voedaily.pause.bgColor"]; + const room = React.useContext(RoomContext); let baseVideo, pipOverlay, otherOverlays; let pipIdx; let bubbleIdx; - const room = React.useContext(RoomContext); switch (currentLayout) { case "1x1": pipIdx = null; bubbleIdx = 1; - baseVideo = ; + baseVideo = ( + + ); break; case "2x1": pipIdx = null; @@ -54,7 +64,9 @@ export default function AugmentedSplit(props) { case "1x1withPIP": pipIdx = 1; bubbleIdx = 2; - baseVideo = ; + baseVideo = ( + + ); break; case "2x1withPIP": pipIdx = 2; @@ -85,12 +97,17 @@ export default function AugmentedSplit(props) { {baseVideo && baseVideo} {pipOverlay && pipOverlay} {otherOverlays && otherOverlays} + ); @@ -121,7 +138,7 @@ function getInitials(name) { function SimplePip({ participant }) { const { videoId, displayName = "", paused } = participant; const pxPerGu = useGrid().pixelsPerGridUnit; - const pipSize_gu = 10; + const pipSize_gu = 6; const layoutProps = { positionCorner: PositionCorner.TOP_RIGHT, @@ -136,15 +153,9 @@ function SimplePip({ participant }) { fontFamily: "DMSans", fontWeight: "700", textAlign: "center", - fontSize_px: 56, + fontSize_gu: 2, }; - // const layoutPause = [centerText, { minH_gu: 5, minW_gu: 3 }]; - const layoutPause = [ - layoutFuncs.placeText, - { vAlign: "center", hAlign: "center" }, - ]; - const videoStyle = { cornerRadius_px: (pipSize_gu / 2) * pxPerGu, // mask to circle }; @@ -164,13 +175,18 @@ function SimplePip({ participant }) { if (paused || videoId == null) { // no video available, show a placeholder with the icon content = ( - + {displayName ? ( - - - {getInitials(displayName)} - - + + {getInitials(displayName)} + ) : ( )} @@ -178,7 +194,7 @@ function SimplePip({ participant }) { ); } else { content = ( - +