[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"navigation":3,"/examples/basic-setup":238,"/examples/basic-setup-surround":756},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":186,"body":240,"description":750,"extension":751,"links":752,"meta":753,"navigation":359,"path":187,"seo":754,"stem":188,"__hash__":755},"docs/08.examples/1.basic-setup.md",{"type":241,"value":242,"toc":746},"minimark",[243,252,255,260,264,267,721,731,742],[244,245,246,247,251],"p",{},"Scena is a video widget that mounts into any container with a single ",[248,249,250],"code",{},"mount()"," call. It supports a wide range of configuration options — from size and shape to playback behavior, overlay controls, and visibility transitions.",[244,253,254],{},"The configuration panel below lets you adjust every available parameter in real time. Each change is applied to the running instance without remounting, so you can explore how the widget responds to different settings immediately.",[256,257,259],"h2",{"id":258},"demo","Demo",[261,262],"scena-component-basic-setup",{":config":263},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"ctaButton\":{\"text\":\"Custom action\"},\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"visibility\":{\"isShownOnReady\":true},\"preview\":{\"size\":\"sm\",\"ctaButton\":false,\"closeButton\":false}}",[256,265,266],{"id":248},"Code",[268,269,275],"pre",{"className":270,"code":271,"filename":272,"language":273,"meta":274,"style":274},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  useScena,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\n  ComponentPlacement,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: {\n    src: '/video.mp4',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  ctaButton: {\n    text: 'Custom action',\n  },\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n  },\n  visibility: {\n    isShownOnReady: true,\n  },\n  preview: {\n    size: ComponentSize.SM,\n    ctaButton: false,\n    closeButton: false,\n  },\n});\n","main.ts","ts","",[248,276,277,290,300,308,316,324,332,354,361,375,380,402,407,435,447,464,478,491,503,509,527,545,555,572,577,587,605,623,628,638,650,655,665,682,694,706,711],{"__ignoreMap":274},[278,279,282,286],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"s7zQu","import",[278,287,289],{"class":288},"sMK4o"," {\n",[278,291,293,297],{"class":280,"line":292},2,[278,294,296],{"class":295},"sTEyZ","  useScena",[278,298,299],{"class":288},",\n",[278,301,303,306],{"class":280,"line":302},3,[278,304,305],{"class":295},"  ComponentSize",[278,307,299],{"class":288},[278,309,311,314],{"class":280,"line":310},4,[278,312,313],{"class":295},"  ComponentShape",[278,315,299],{"class":288},[278,317,319,322],{"class":280,"line":318},5,[278,320,321],{"class":295},"  ComponentPosition",[278,323,299],{"class":288},[278,325,327,330],{"class":280,"line":326},6,[278,328,329],{"class":295},"  ComponentPlacement",[278,331,299],{"class":288},[278,333,335,338,341,344,348,351],{"class":280,"line":334},7,[278,336,337],{"class":288},"}",[278,339,340],{"class":284}," from",[278,342,343],{"class":288}," '",[278,345,347],{"class":346},"sfazB","@retoo/scena",[278,349,350],{"class":288},"'",[278,352,353],{"class":288},";\n",[278,355,357],{"class":280,"line":356},8,[278,358,360],{"emptyLinePlaceholder":359},true,"\n",[278,362,364,366,368,371,373],{"class":280,"line":363},9,[278,365,285],{"class":284},[278,367,343],{"class":288},[278,369,370],{"class":346},"@retoo/scena/styles",[278,372,350],{"class":288},[278,374,353],{"class":288},[278,376,378],{"class":280,"line":377},10,[278,379,360],{"emptyLinePlaceholder":359},[278,381,383,387,390,393,397,400],{"class":280,"line":382},11,[278,384,386],{"class":385},"spNyl","const",[278,388,389],{"class":295}," scena ",[278,391,392],{"class":288},"=",[278,394,396],{"class":395},"s2Zo4"," useScena",[278,398,399],{"class":295},"()",[278,401,353],{"class":288},[278,403,405],{"class":280,"line":404},12,[278,406,360],{"emptyLinePlaceholder":359},[278,408,410,412,415,417,420,423,426,429,432],{"class":280,"line":409},13,[278,411,386],{"class":385},[278,413,414],{"class":295}," instance ",[278,416,392],{"class":288},[278,418,419],{"class":284}," await",[278,421,422],{"class":295}," scena",[278,424,425],{"class":288},".",[278,427,428],{"class":395},"mount",[278,430,431],{"class":295},"(",[278,433,434],{"class":288},"{\n",[278,436,438,442,445],{"class":280,"line":437},14,[278,439,441],{"class":440},"swJcz","  video",[278,443,444],{"class":288},":",[278,446,289],{"class":288},[278,448,450,453,455,457,460,462],{"class":280,"line":449},15,[278,451,452],{"class":440},"    src",[278,454,444],{"class":288},[278,456,343],{"class":288},[278,458,459],{"class":346},"/video.mp4",[278,461,350],{"class":288},[278,463,299],{"class":288},[278,465,467,470,472,476],{"class":280,"line":466},16,[278,468,469],{"class":440},"    autoplay",[278,471,444],{"class":288},[278,473,475],{"class":474},"sfNiH"," false",[278,477,299],{"class":288},[278,479,481,484,486,489],{"class":280,"line":480},17,[278,482,483],{"class":440},"    loop",[278,485,444],{"class":288},[278,487,488],{"class":474}," true",[278,490,299],{"class":288},[278,492,494,497,499,501],{"class":280,"line":493},18,[278,495,496],{"class":440},"    muted",[278,498,444],{"class":288},[278,500,488],{"class":474},[278,502,299],{"class":288},[278,504,506],{"class":280,"line":505},19,[278,507,508],{"class":288},"  },\n",[278,510,512,515,517,520,522,525],{"class":280,"line":511},20,[278,513,514],{"class":440},"  size",[278,516,444],{"class":288},[278,518,519],{"class":295}," ComponentSize",[278,521,425],{"class":288},[278,523,524],{"class":295},"MD",[278,526,299],{"class":288},[278,528,530,533,535,538,540,543],{"class":280,"line":529},21,[278,531,532],{"class":440},"  shape",[278,534,444],{"class":288},[278,536,537],{"class":295}," ComponentShape",[278,539,425],{"class":288},[278,541,542],{"class":295},"CIRCLE",[278,544,299],{"class":288},[278,546,548,551,553],{"class":280,"line":547},22,[278,549,550],{"class":440},"  ctaButton",[278,552,444],{"class":288},[278,554,289],{"class":288},[278,556,558,561,563,565,568,570],{"class":280,"line":557},23,[278,559,560],{"class":440},"    text",[278,562,444],{"class":288},[278,564,343],{"class":288},[278,566,567],{"class":346},"Custom action",[278,569,350],{"class":288},[278,571,299],{"class":288},[278,573,575],{"class":280,"line":574},24,[278,576,508],{"class":288},[278,578,580,583,585],{"class":280,"line":579},25,[278,581,582],{"class":440},"  container",[278,584,444],{"class":288},[278,586,289],{"class":288},[278,588,590,593,595,598,600,603],{"class":280,"line":589},26,[278,591,592],{"class":440},"    position",[278,594,444],{"class":288},[278,596,597],{"class":295}," ComponentPosition",[278,599,425],{"class":288},[278,601,602],{"class":295},"ABSOLUTE",[278,604,299],{"class":288},[278,606,608,611,613,616,618,621],{"class":280,"line":607},27,[278,609,610],{"class":440},"    placement",[278,612,444],{"class":288},[278,614,615],{"class":295}," ComponentPlacement",[278,617,425],{"class":288},[278,619,620],{"class":295},"MIDDLE_CENTER",[278,622,299],{"class":288},[278,624,626],{"class":280,"line":625},28,[278,627,508],{"class":288},[278,629,631,634,636],{"class":280,"line":630},29,[278,632,633],{"class":440},"  visibility",[278,635,444],{"class":288},[278,637,289],{"class":288},[278,639,641,644,646,648],{"class":280,"line":640},30,[278,642,643],{"class":440},"    isShownOnReady",[278,645,444],{"class":288},[278,647,488],{"class":474},[278,649,299],{"class":288},[278,651,653],{"class":280,"line":652},31,[278,654,508],{"class":288},[278,656,658,661,663],{"class":280,"line":657},32,[278,659,660],{"class":440},"  preview",[278,662,444],{"class":288},[278,664,289],{"class":288},[278,666,668,671,673,675,677,680],{"class":280,"line":667},33,[278,669,670],{"class":440},"    size",[278,672,444],{"class":288},[278,674,519],{"class":295},[278,676,425],{"class":288},[278,678,679],{"class":295},"SM",[278,681,299],{"class":288},[278,683,685,688,690,692],{"class":280,"line":684},34,[278,686,687],{"class":440},"    ctaButton",[278,689,444],{"class":288},[278,691,475],{"class":474},[278,693,299],{"class":288},[278,695,697,700,702,704],{"class":280,"line":696},35,[278,698,699],{"class":440},"    closeButton",[278,701,444],{"class":288},[278,703,475],{"class":474},[278,705,299],{"class":288},[278,707,709],{"class":280,"line":708},36,[278,710,508],{"class":288},[278,712,714,716,719],{"class":280,"line":713},37,[278,715,337],{"class":288},[278,717,718],{"class":295},")",[278,720,353],{"class":288},[244,722,723,724,726,727,730],{},"The ",[248,725,250],{}," call is async — it resolves once the widget is mounted in the DOM. The returned ",[248,728,729],{},"instance"," exposes the full API: playback control, runtime config updates, event listeners, visibility management, and preview state.",[732,733,735],"callout",{"icon":734,"to":20},"i-lucide-arrow-right",[244,736,737,738,741],{},"See ",[739,740,19],"strong",{}," for the next steps: controlling playback, listening to events, and updating config at runtime.",[743,744,745],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":274,"searchDepth":281,"depth":292,"links":747},[748,749],{"id":258,"depth":292,"text":259},{"id":248,"depth":292,"text":266},"Minimal widget mounted with a single required field — video.src.","md",null,{},{"title":186,"description":750},"uCbtICfW8IxCZGdaOpy86zDDpzIr00QmAlQ1Tf0JeUU",[757,759],{"title":177,"path":178,"stem":179,"description":758,"children":-1},"Use the scena-video-widget custom element in React, Vue, Angular, and vanilla HTML.",{"title":190,"path":191,"stem":192,"description":760,"children":-1},"Override CSS custom properties and component constants to match your brand.",1777984317791]