[{"data":1,"prerenderedAt":1792},["ShallowReactive",2],{"navigation":3,"/getting-started/quick-start":238,"/getting-started/quick-start-surround":1787},[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":19,"body":240,"description":1781,"extension":1782,"links":1783,"meta":1784,"navigation":311,"path":20,"seo":1785,"stem":21,"__hash__":1786},"docs/01.getting-started/3.quick-start.md",{"type":241,"value":242,"toc":1774},"minimark",[243,248,450,454,457,464,770,774,781,954,957,1061,1065,1072,1333,1339,1450,1454,1461,1645,1651,1759,1770],[244,245,247],"h2",{"id":246},"basic-setup","Basic setup",[249,250,251,256,260,327,331,337,362,366,377,445],"steps",{},[252,253,255],"h3",{"id":254},"import-scena","Import Scena",[257,258,259],"p",{},"Import the factory function and the required stylesheet:",[261,262,267],"pre",{"className":263,"code":264,"language":265,"meta":266,"style":266},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n","ts","",[268,269,270,306,313],"code",{"__ignoreMap":266},[271,272,275,279,283,287,290,293,296,300,303],"span",{"class":273,"line":274},"line",1,[271,276,278],{"class":277},"s7zQu","import",[271,280,282],{"class":281},"sMK4o"," {",[271,284,286],{"class":285},"sTEyZ"," useScena",[271,288,289],{"class":281}," }",[271,291,292],{"class":277}," from",[271,294,295],{"class":281}," '",[271,297,299],{"class":298},"sfazB","@retoo/scena",[271,301,302],{"class":281},"'",[271,304,305],{"class":281},";\n",[271,307,309],{"class":273,"line":308},2,[271,310,312],{"emptyLinePlaceholder":311},true,"\n",[271,314,316,318,320,323,325],{"class":273,"line":315},3,[271,317,278],{"class":277},[271,319,295],{"class":281},[271,321,322],{"class":298},"@retoo/scena/styles",[271,324,302],{"class":281},[271,326,305],{"class":281},[252,328,330],{"id":329},"create-a-factory","Create a factory",[257,332,333,336],{},[268,334,335],{},"useScena()"," returns a factory object that manages widget instances. One factory can create multiple independent widgets:",[261,338,340],{"className":263,"code":339,"language":265,"meta":266,"style":266},"const scena = useScena();\n",[268,341,342],{"__ignoreMap":266},[271,343,344,348,351,354,357,360],{"class":273,"line":274},[271,345,347],{"class":346},"spNyl","const",[271,349,350],{"class":285}," scena ",[271,352,353],{"class":281},"=",[271,355,286],{"class":356},"s2Zo4",[271,358,359],{"class":285},"()",[271,361,305],{"class":281},[252,363,365],{"id":364},"mount-the-widget","Mount the widget",[257,367,368,369,372,373,376],{},"Pass a config object to ",[268,370,371],{},"mount()",". The only required field is ",[268,374,375],{},"video.src"," — all other options use defaults:",[261,378,380],{"className":263,"code":379,"language":265,"meta":266,"style":266},"const instance = await scena.mount({\n  video: { src: '/video.mp4' }\n});\n",[268,381,382,409,435],{"__ignoreMap":266},[271,383,384,386,389,391,394,397,400,403,406],{"class":273,"line":274},[271,385,347],{"class":346},[271,387,388],{"class":285}," instance ",[271,390,353],{"class":281},[271,392,393],{"class":277}," await",[271,395,396],{"class":285}," scena",[271,398,399],{"class":281},".",[271,401,402],{"class":356},"mount",[271,404,405],{"class":285},"(",[271,407,408],{"class":281},"{\n",[271,410,411,415,418,420,423,425,427,430,432],{"class":273,"line":308},[271,412,414],{"class":413},"swJcz","  video",[271,416,417],{"class":281},":",[271,419,282],{"class":281},[271,421,422],{"class":413}," src",[271,424,417],{"class":281},[271,426,295],{"class":281},[271,428,429],{"class":298},"/video.mp4",[271,431,302],{"class":281},[271,433,434],{"class":281}," }\n",[271,436,437,440,443],{"class":273,"line":315},[271,438,439],{"class":281},"}",[271,441,442],{"class":285},")",[271,444,305],{"class":281},[257,446,447,449],{},[268,448,371],{}," is async — it resolves after the widget is rendered and attached to the DOM. By default, the widget appears in the bottom-right corner of the viewport.",[244,451,453],{"id":452},"full-example","Full example",[257,455,456],{},"A complete setup with a custom shape, poster image, and CTA button:",[458,459,460],"scena-container",{},[461,462],"scena-component",{":config":463},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":{\"text\":\"Get in touch\",\"customClasses\":{\"button\":\"bg-red\"}}}",[261,465,468],{"className":263,"code":466,"filename":467,"language":265,"meta":266,"style":266},"import {\n  useScena,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\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    poster: '/poster.jpg',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  container: { position: ComponentPosition.RELATIVE },\n  ctaButton: { text: 'Get in touch' },\n});\n","main.ts",[268,469,470,477,485,492,500,508,523,528,541,546,561,566,587,596,612,629,643,656,668,674,692,710,736,761],{"__ignoreMap":266},[271,471,472,474],{"class":273,"line":274},[271,473,278],{"class":277},[271,475,476],{"class":281}," {\n",[271,478,479,482],{"class":273,"line":308},[271,480,481],{"class":285},"  useScena",[271,483,484],{"class":281},",\n",[271,486,487,490],{"class":273,"line":315},[271,488,489],{"class":285},"  ComponentSize",[271,491,484],{"class":281},[271,493,495,498],{"class":273,"line":494},4,[271,496,497],{"class":285},"  ComponentShape",[271,499,484],{"class":281},[271,501,503,506],{"class":273,"line":502},5,[271,504,505],{"class":285},"  ComponentPosition",[271,507,484],{"class":281},[271,509,511,513,515,517,519,521],{"class":273,"line":510},6,[271,512,439],{"class":281},[271,514,292],{"class":277},[271,516,295],{"class":281},[271,518,299],{"class":298},[271,520,302],{"class":281},[271,522,305],{"class":281},[271,524,526],{"class":273,"line":525},7,[271,527,312],{"emptyLinePlaceholder":311},[271,529,531,533,535,537,539],{"class":273,"line":530},8,[271,532,278],{"class":277},[271,534,295],{"class":281},[271,536,322],{"class":298},[271,538,302],{"class":281},[271,540,305],{"class":281},[271,542,544],{"class":273,"line":543},9,[271,545,312],{"emptyLinePlaceholder":311},[271,547,549,551,553,555,557,559],{"class":273,"line":548},10,[271,550,347],{"class":346},[271,552,350],{"class":285},[271,554,353],{"class":281},[271,556,286],{"class":356},[271,558,359],{"class":285},[271,560,305],{"class":281},[271,562,564],{"class":273,"line":563},11,[271,565,312],{"emptyLinePlaceholder":311},[271,567,569,571,573,575,577,579,581,583,585],{"class":273,"line":568},12,[271,570,347],{"class":346},[271,572,388],{"class":285},[271,574,353],{"class":281},[271,576,393],{"class":277},[271,578,396],{"class":285},[271,580,399],{"class":281},[271,582,402],{"class":356},[271,584,405],{"class":285},[271,586,408],{"class":281},[271,588,590,592,594],{"class":273,"line":589},13,[271,591,414],{"class":413},[271,593,417],{"class":281},[271,595,476],{"class":281},[271,597,599,602,604,606,608,610],{"class":273,"line":598},14,[271,600,601],{"class":413},"    src",[271,603,417],{"class":281},[271,605,295],{"class":281},[271,607,429],{"class":298},[271,609,302],{"class":281},[271,611,484],{"class":281},[271,613,615,618,620,622,625,627],{"class":273,"line":614},15,[271,616,617],{"class":413},"    poster",[271,619,417],{"class":281},[271,621,295],{"class":281},[271,623,624],{"class":298},"/poster.jpg",[271,626,302],{"class":281},[271,628,484],{"class":281},[271,630,632,635,637,641],{"class":273,"line":631},16,[271,633,634],{"class":413},"    autoplay",[271,636,417],{"class":281},[271,638,640],{"class":639},"sfNiH"," false",[271,642,484],{"class":281},[271,644,646,649,651,654],{"class":273,"line":645},17,[271,647,648],{"class":413},"    loop",[271,650,417],{"class":281},[271,652,653],{"class":639}," true",[271,655,484],{"class":281},[271,657,659,662,664,666],{"class":273,"line":658},18,[271,660,661],{"class":413},"    muted",[271,663,417],{"class":281},[271,665,653],{"class":639},[271,667,484],{"class":281},[271,669,671],{"class":273,"line":670},19,[271,672,673],{"class":281},"  },\n",[271,675,677,680,682,685,687,690],{"class":273,"line":676},20,[271,678,679],{"class":413},"  size",[271,681,417],{"class":281},[271,683,684],{"class":285}," ComponentSize",[271,686,399],{"class":281},[271,688,689],{"class":285},"MD",[271,691,484],{"class":281},[271,693,695,698,700,703,705,708],{"class":273,"line":694},21,[271,696,697],{"class":413},"  shape",[271,699,417],{"class":281},[271,701,702],{"class":285}," ComponentShape",[271,704,399],{"class":281},[271,706,707],{"class":285},"CIRCLE",[271,709,484],{"class":281},[271,711,713,716,718,720,723,725,728,730,733],{"class":273,"line":712},22,[271,714,715],{"class":413},"  container",[271,717,417],{"class":281},[271,719,282],{"class":281},[271,721,722],{"class":413}," position",[271,724,417],{"class":281},[271,726,727],{"class":285}," ComponentPosition",[271,729,399],{"class":281},[271,731,732],{"class":285},"RELATIVE ",[271,734,735],{"class":281},"},\n",[271,737,739,742,744,746,749,751,753,756,758],{"class":273,"line":738},23,[271,740,741],{"class":413},"  ctaButton",[271,743,417],{"class":281},[271,745,282],{"class":281},[271,747,748],{"class":413}," text",[271,750,417],{"class":281},[271,752,295],{"class":281},[271,754,755],{"class":298},"Get in touch",[271,757,302],{"class":281},[271,759,760],{"class":281}," },\n",[271,762,764,766,768],{"class":273,"line":763},24,[271,765,439],{"class":281},[271,767,442],{"class":285},[271,769,305],{"class":281},[244,771,773],{"id":772},"controlling-playback","Controlling playback",[257,775,776,777,780],{},"The ",[268,778,779],{},"instance.api.controller"," interface provides full control over the video element. All methods are available immediately after mount:",[261,782,784],{"className":263,"code":783,"language":265,"meta":266,"style":266},"// Play and pause\nawait instance.api.controller.play();\ninstance.api.controller.pause();\n\n// Seek to a specific time in seconds\ninstance.api.controller.seek(15);\n\n// Volume control (0.0 to 1.0)\ninstance.api.controller.setVolume(0.5);\ninstance.api.controller.mute();\ninstance.api.controller.unmute();\n",[268,785,786,792,819,841,845,850,877,881,886,912,933],{"__ignoreMap":266},[271,787,788],{"class":273,"line":274},[271,789,791],{"class":790},"sHwdD","// Play and pause\n",[271,793,794,797,800,802,805,807,810,812,815,817],{"class":273,"line":308},[271,795,796],{"class":277},"await",[271,798,799],{"class":285}," instance",[271,801,399],{"class":281},[271,803,804],{"class":285},"api",[271,806,399],{"class":281},[271,808,809],{"class":285},"controller",[271,811,399],{"class":281},[271,813,814],{"class":356},"play",[271,816,359],{"class":285},[271,818,305],{"class":281},[271,820,821,824,826,828,830,832,834,837,839],{"class":273,"line":315},[271,822,823],{"class":285},"instance",[271,825,399],{"class":281},[271,827,804],{"class":285},[271,829,399],{"class":281},[271,831,809],{"class":285},[271,833,399],{"class":281},[271,835,836],{"class":356},"pause",[271,838,359],{"class":285},[271,840,305],{"class":281},[271,842,843],{"class":273,"line":494},[271,844,312],{"emptyLinePlaceholder":311},[271,846,847],{"class":273,"line":502},[271,848,849],{"class":790},"// Seek to a specific time in seconds\n",[271,851,852,854,856,858,860,862,864,867,869,873,875],{"class":273,"line":510},[271,853,823],{"class":285},[271,855,399],{"class":281},[271,857,804],{"class":285},[271,859,399],{"class":281},[271,861,809],{"class":285},[271,863,399],{"class":281},[271,865,866],{"class":356},"seek",[271,868,405],{"class":285},[271,870,872],{"class":871},"sbssI","15",[271,874,442],{"class":285},[271,876,305],{"class":281},[271,878,879],{"class":273,"line":525},[271,880,312],{"emptyLinePlaceholder":311},[271,882,883],{"class":273,"line":530},[271,884,885],{"class":790},"// Volume control (0.0 to 1.0)\n",[271,887,888,890,892,894,896,898,900,903,905,908,910],{"class":273,"line":543},[271,889,823],{"class":285},[271,891,399],{"class":281},[271,893,804],{"class":285},[271,895,399],{"class":281},[271,897,809],{"class":285},[271,899,399],{"class":281},[271,901,902],{"class":356},"setVolume",[271,904,405],{"class":285},[271,906,907],{"class":871},"0.5",[271,909,442],{"class":285},[271,911,305],{"class":281},[271,913,914,916,918,920,922,924,926,929,931],{"class":273,"line":548},[271,915,823],{"class":285},[271,917,399],{"class":281},[271,919,804],{"class":285},[271,921,399],{"class":281},[271,923,809],{"class":285},[271,925,399],{"class":281},[271,927,928],{"class":356},"mute",[271,930,359],{"class":285},[271,932,305],{"class":281},[271,934,935,937,939,941,943,945,947,950,952],{"class":273,"line":563},[271,936,823],{"class":285},[271,938,399],{"class":281},[271,940,804],{"class":285},[271,942,399],{"class":281},[271,944,809],{"class":285},[271,946,399],{"class":281},[271,948,949],{"class":356},"unmute",[271,951,359],{"class":285},[271,953,305],{"class":281},[257,955,956],{},"You can also read the current playback state at any time:",[261,958,960],{"className":263,"code":959,"language":265,"meta":266,"style":266},"instance.api.controller.currentTime; \ninstance.api.controller.duration;\ninstance.api.controller.progress;\ninstance.api.controller.isMuted;\ninstance.api.controller.state;\n",[268,961,962,985,1004,1023,1042],{"__ignoreMap":266},[271,963,964,966,968,970,972,974,976,979,982],{"class":273,"line":274},[271,965,823],{"class":285},[271,967,399],{"class":281},[271,969,804],{"class":285},[271,971,399],{"class":281},[271,973,809],{"class":285},[271,975,399],{"class":281},[271,977,978],{"class":285},"currentTime",[271,980,981],{"class":281},";",[271,983,984],{"class":285}," \n",[271,986,987,989,991,993,995,997,999,1002],{"class":273,"line":308},[271,988,823],{"class":285},[271,990,399],{"class":281},[271,992,804],{"class":285},[271,994,399],{"class":281},[271,996,809],{"class":285},[271,998,399],{"class":281},[271,1000,1001],{"class":285},"duration",[271,1003,305],{"class":281},[271,1005,1006,1008,1010,1012,1014,1016,1018,1021],{"class":273,"line":315},[271,1007,823],{"class":285},[271,1009,399],{"class":281},[271,1011,804],{"class":285},[271,1013,399],{"class":281},[271,1015,809],{"class":285},[271,1017,399],{"class":281},[271,1019,1020],{"class":285},"progress",[271,1022,305],{"class":281},[271,1024,1025,1027,1029,1031,1033,1035,1037,1040],{"class":273,"line":494},[271,1026,823],{"class":285},[271,1028,399],{"class":281},[271,1030,804],{"class":285},[271,1032,399],{"class":281},[271,1034,809],{"class":285},[271,1036,399],{"class":281},[271,1038,1039],{"class":285},"isMuted",[271,1041,305],{"class":281},[271,1043,1044,1046,1048,1050,1052,1054,1056,1059],{"class":273,"line":502},[271,1045,823],{"class":285},[271,1047,399],{"class":281},[271,1049,804],{"class":285},[271,1051,399],{"class":281},[271,1053,809],{"class":285},[271,1055,399],{"class":281},[271,1057,1058],{"class":285},"state",[271,1060,305],{"class":281},[244,1062,1064],{"id":1063},"listening-to-events","Listening to events",[257,1066,1067,1068,1071],{},"Subscribe to typed events through ",[268,1069,1070],{},"instance.api.events"," to connect the widget with your application logic:",[261,1073,1076],{"className":263,"code":1074,"filename":1075,"language":265,"meta":266,"style":266},"import { ScenaEvent } from '@retoo/scena';\n\n// User clicked the CTA button\ninstance.api.events.on(ScenaEvent.ON_CTA_CLICK, () => {\n  window.location.href = '/contact';\n});\n\n// Video finished playing\ninstance.api.events.on(ScenaEvent.ON_VIDEO_ENDED, () => {\n  showNextStep();\n});\n\n// Track playback progress\ninstance.api.events.on(ScenaEvent.ON_VIDEO_TIME_UPDATE, ({ state }) => {\n  analytics.track('video_progress', { time: state.currentTime });\n});\n","events.ts",[268,1077,1078,1099,1103,1108,1145,1172,1180,1184,1189,1220,1229,1237,1241,1246,1285,1325],{"__ignoreMap":266},[271,1079,1080,1082,1084,1087,1089,1091,1093,1095,1097],{"class":273,"line":274},[271,1081,278],{"class":277},[271,1083,282],{"class":281},[271,1085,1086],{"class":285}," ScenaEvent",[271,1088,289],{"class":281},[271,1090,292],{"class":277},[271,1092,295],{"class":281},[271,1094,299],{"class":298},[271,1096,302],{"class":281},[271,1098,305],{"class":281},[271,1100,1101],{"class":273,"line":308},[271,1102,312],{"emptyLinePlaceholder":311},[271,1104,1105],{"class":273,"line":315},[271,1106,1107],{"class":790},"// User clicked the CTA button\n",[271,1109,1110,1112,1114,1116,1118,1121,1123,1126,1129,1131,1134,1137,1140,1143],{"class":273,"line":494},[271,1111,823],{"class":285},[271,1113,399],{"class":281},[271,1115,804],{"class":285},[271,1117,399],{"class":281},[271,1119,1120],{"class":285},"events",[271,1122,399],{"class":281},[271,1124,1125],{"class":356},"on",[271,1127,1128],{"class":285},"(ScenaEvent",[271,1130,399],{"class":281},[271,1132,1133],{"class":285},"ON_CTA_CLICK",[271,1135,1136],{"class":281},",",[271,1138,1139],{"class":281}," ()",[271,1141,1142],{"class":346}," =>",[271,1144,476],{"class":281},[271,1146,1147,1150,1152,1155,1157,1160,1163,1165,1168,1170],{"class":273,"line":502},[271,1148,1149],{"class":285},"  window",[271,1151,399],{"class":281},[271,1153,1154],{"class":285},"location",[271,1156,399],{"class":281},[271,1158,1159],{"class":285},"href",[271,1161,1162],{"class":281}," =",[271,1164,295],{"class":281},[271,1166,1167],{"class":298},"/contact",[271,1169,302],{"class":281},[271,1171,305],{"class":281},[271,1173,1174,1176,1178],{"class":273,"line":510},[271,1175,439],{"class":281},[271,1177,442],{"class":285},[271,1179,305],{"class":281},[271,1181,1182],{"class":273,"line":525},[271,1183,312],{"emptyLinePlaceholder":311},[271,1185,1186],{"class":273,"line":530},[271,1187,1188],{"class":790},"// Video finished playing\n",[271,1190,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1212,1214,1216,1218],{"class":273,"line":543},[271,1192,823],{"class":285},[271,1194,399],{"class":281},[271,1196,804],{"class":285},[271,1198,399],{"class":281},[271,1200,1120],{"class":285},[271,1202,399],{"class":281},[271,1204,1125],{"class":356},[271,1206,1128],{"class":285},[271,1208,399],{"class":281},[271,1210,1211],{"class":285},"ON_VIDEO_ENDED",[271,1213,1136],{"class":281},[271,1215,1139],{"class":281},[271,1217,1142],{"class":346},[271,1219,476],{"class":281},[271,1221,1222,1225,1227],{"class":273,"line":548},[271,1223,1224],{"class":356},"  showNextStep",[271,1226,359],{"class":413},[271,1228,305],{"class":281},[271,1230,1231,1233,1235],{"class":273,"line":563},[271,1232,439],{"class":281},[271,1234,442],{"class":285},[271,1236,305],{"class":281},[271,1238,1239],{"class":273,"line":568},[271,1240,312],{"emptyLinePlaceholder":311},[271,1242,1243],{"class":273,"line":589},[271,1244,1245],{"class":790},"// Track playback progress\n",[271,1247,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1269,1271,1274,1278,1281,1283],{"class":273,"line":598},[271,1249,823],{"class":285},[271,1251,399],{"class":281},[271,1253,804],{"class":285},[271,1255,399],{"class":281},[271,1257,1120],{"class":285},[271,1259,399],{"class":281},[271,1261,1125],{"class":356},[271,1263,1128],{"class":285},[271,1265,399],{"class":281},[271,1267,1268],{"class":285},"ON_VIDEO_TIME_UPDATE",[271,1270,1136],{"class":281},[271,1272,1273],{"class":281}," ({",[271,1275,1277],{"class":1276},"sHdIc"," state",[271,1279,1280],{"class":281}," })",[271,1282,1142],{"class":346},[271,1284,476],{"class":281},[271,1286,1287,1290,1292,1295,1297,1299,1302,1304,1306,1308,1311,1313,1315,1317,1319,1321,1323],{"class":273,"line":614},[271,1288,1289],{"class":285},"  analytics",[271,1291,399],{"class":281},[271,1293,1294],{"class":356},"track",[271,1296,405],{"class":413},[271,1298,302],{"class":281},[271,1300,1301],{"class":298},"video_progress",[271,1303,302],{"class":281},[271,1305,1136],{"class":281},[271,1307,282],{"class":281},[271,1309,1310],{"class":413}," time",[271,1312,417],{"class":281},[271,1314,1277],{"class":285},[271,1316,399],{"class":281},[271,1318,978],{"class":285},[271,1320,289],{"class":281},[271,1322,442],{"class":413},[271,1324,305],{"class":281},[271,1326,1327,1329,1331],{"class":273,"line":631},[271,1328,439],{"class":281},[271,1330,442],{"class":285},[271,1332,305],{"class":281},[257,1334,1335,1336,417],{},"To remove a specific handler, pass the same function reference to ",[268,1337,1338],{},"off()",[261,1340,1342],{"className":263,"code":1341,"language":265,"meta":266,"style":266},"const handler = () => console.log('played');\n\ninstance.api.events.on(ScenaEvent.ON_VIDEO_PLAY, handler);\n\n// Later\ninstance.api.events.off(ScenaEvent.ON_VIDEO_PLAY, handler);\n",[268,1343,1344,1378,1382,1412,1416,1421],{"__ignoreMap":266},[271,1345,1346,1348,1351,1353,1355,1357,1360,1362,1365,1367,1369,1372,1374,1376],{"class":273,"line":274},[271,1347,347],{"class":346},[271,1349,1350],{"class":285}," handler ",[271,1352,353],{"class":281},[271,1354,1139],{"class":281},[271,1356,1142],{"class":346},[271,1358,1359],{"class":285}," console",[271,1361,399],{"class":281},[271,1363,1364],{"class":356},"log",[271,1366,405],{"class":285},[271,1368,302],{"class":281},[271,1370,1371],{"class":298},"played",[271,1373,302],{"class":281},[271,1375,442],{"class":285},[271,1377,305],{"class":281},[271,1379,1380],{"class":273,"line":308},[271,1381,312],{"emptyLinePlaceholder":311},[271,1383,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1405,1407,1410],{"class":273,"line":315},[271,1385,823],{"class":285},[271,1387,399],{"class":281},[271,1389,804],{"class":285},[271,1391,399],{"class":281},[271,1393,1120],{"class":285},[271,1395,399],{"class":281},[271,1397,1125],{"class":356},[271,1399,1128],{"class":285},[271,1401,399],{"class":281},[271,1403,1404],{"class":285},"ON_VIDEO_PLAY",[271,1406,1136],{"class":281},[271,1408,1409],{"class":285}," handler)",[271,1411,305],{"class":281},[271,1413,1414],{"class":273,"line":494},[271,1415,312],{"emptyLinePlaceholder":311},[271,1417,1418],{"class":273,"line":502},[271,1419,1420],{"class":790},"// Later\n",[271,1422,1423,1425,1427,1429,1431,1433,1435,1438,1440,1442,1444,1446,1448],{"class":273,"line":510},[271,1424,823],{"class":285},[271,1426,399],{"class":281},[271,1428,804],{"class":285},[271,1430,399],{"class":281},[271,1432,1120],{"class":285},[271,1434,399],{"class":281},[271,1436,1437],{"class":356},"off",[271,1439,1128],{"class":285},[271,1441,399],{"class":281},[271,1443,1404],{"class":285},[271,1445,1136],{"class":281},[271,1447,1409],{"class":285},[271,1449,305],{"class":281},[244,1451,1453],{"id":1452},"runtime","Runtime",[257,1455,1456,1457,1460],{},"Modify any config property after mount without recreating the widget. ",[268,1458,1459],{},"mergeConfig()"," performs a deep merge — only the fields you pass are updated:",[261,1462,1465],{"className":263,"code":1463,"filename":1464,"language":265,"meta":266,"style":266},"import { ComponentSize, ComponentShape } from '@retoo/scena';\n\n// Change size and shape\ninstance.config.mergeConfig({\n  size: ComponentSize.LG,\n  shape: ComponentShape.PORTRAIT,\n});\n\n// Update CTA button text\ninstance.config.mergeConfig({ ctaButton: { text: 'Buy now' } });\n\n// Disable a component entirely\ninstance.config.mergeConfig({ ctaButton: false });\n","runtime.ts",[268,1466,1467,1491,1495,1500,1518,1533,1548,1556,1560,1565,1608,1612,1617],{"__ignoreMap":266},[271,1468,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489],{"class":273,"line":274},[271,1470,278],{"class":277},[271,1472,282],{"class":281},[271,1474,684],{"class":285},[271,1476,1136],{"class":281},[271,1478,702],{"class":285},[271,1480,289],{"class":281},[271,1482,292],{"class":277},[271,1484,295],{"class":281},[271,1486,299],{"class":298},[271,1488,302],{"class":281},[271,1490,305],{"class":281},[271,1492,1493],{"class":273,"line":308},[271,1494,312],{"emptyLinePlaceholder":311},[271,1496,1497],{"class":273,"line":315},[271,1498,1499],{"class":790},"// Change size and shape\n",[271,1501,1502,1504,1506,1509,1511,1514,1516],{"class":273,"line":494},[271,1503,823],{"class":285},[271,1505,399],{"class":281},[271,1507,1508],{"class":285},"config",[271,1510,399],{"class":281},[271,1512,1513],{"class":356},"mergeConfig",[271,1515,405],{"class":285},[271,1517,408],{"class":281},[271,1519,1520,1522,1524,1526,1528,1531],{"class":273,"line":502},[271,1521,679],{"class":413},[271,1523,417],{"class":281},[271,1525,684],{"class":285},[271,1527,399],{"class":281},[271,1529,1530],{"class":285},"LG",[271,1532,484],{"class":281},[271,1534,1535,1537,1539,1541,1543,1546],{"class":273,"line":510},[271,1536,697],{"class":413},[271,1538,417],{"class":281},[271,1540,702],{"class":285},[271,1542,399],{"class":281},[271,1544,1545],{"class":285},"PORTRAIT",[271,1547,484],{"class":281},[271,1549,1550,1552,1554],{"class":273,"line":525},[271,1551,439],{"class":281},[271,1553,442],{"class":285},[271,1555,305],{"class":281},[271,1557,1558],{"class":273,"line":530},[271,1559,312],{"emptyLinePlaceholder":311},[271,1561,1562],{"class":273,"line":543},[271,1563,1564],{"class":790},"// Update CTA button text\n",[271,1566,1567,1569,1571,1573,1575,1577,1579,1582,1585,1587,1589,1591,1593,1595,1598,1600,1602,1604,1606],{"class":273,"line":548},[271,1568,823],{"class":285},[271,1570,399],{"class":281},[271,1572,1508],{"class":285},[271,1574,399],{"class":281},[271,1576,1513],{"class":356},[271,1578,405],{"class":285},[271,1580,1581],{"class":281},"{",[271,1583,1584],{"class":413}," ctaButton",[271,1586,417],{"class":281},[271,1588,282],{"class":281},[271,1590,748],{"class":413},[271,1592,417],{"class":281},[271,1594,295],{"class":281},[271,1596,1597],{"class":298},"Buy now",[271,1599,302],{"class":281},[271,1601,289],{"class":281},[271,1603,289],{"class":281},[271,1605,442],{"class":285},[271,1607,305],{"class":281},[271,1609,1610],{"class":273,"line":563},[271,1611,312],{"emptyLinePlaceholder":311},[271,1613,1614],{"class":273,"line":568},[271,1615,1616],{"class":790},"// Disable a component entirely\n",[271,1618,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643],{"class":273,"line":589},[271,1620,823],{"class":285},[271,1622,399],{"class":281},[271,1624,1508],{"class":285},[271,1626,399],{"class":281},[271,1628,1513],{"class":356},[271,1630,405],{"class":285},[271,1632,1581],{"class":281},[271,1634,1584],{"class":413},[271,1636,417],{"class":281},[271,1638,640],{"class":639},[271,1640,289],{"class":281},[271,1642,442],{"class":285},[271,1644,305],{"class":281},[257,1646,1647,1648,417],{},"To replace the entire config at once, use ",[268,1649,1650],{},"setConfig()",[261,1652,1654],{"className":263,"code":1653,"language":265,"meta":266,"style":266},"import { ComponentSize, ComponentShape } from '@retoo/scena';\n\ninstance.config.setConfig({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.SM,\n  shape: ComponentShape.SQUARE,\n});\n",[268,1655,1656,1680,1684,1701,1721,1736,1751],{"__ignoreMap":266},[271,1657,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678],{"class":273,"line":274},[271,1659,278],{"class":277},[271,1661,282],{"class":281},[271,1663,684],{"class":285},[271,1665,1136],{"class":281},[271,1667,702],{"class":285},[271,1669,289],{"class":281},[271,1671,292],{"class":277},[271,1673,295],{"class":281},[271,1675,299],{"class":298},[271,1677,302],{"class":281},[271,1679,305],{"class":281},[271,1681,1682],{"class":273,"line":308},[271,1683,312],{"emptyLinePlaceholder":311},[271,1685,1686,1688,1690,1692,1694,1697,1699],{"class":273,"line":315},[271,1687,823],{"class":285},[271,1689,399],{"class":281},[271,1691,1508],{"class":285},[271,1693,399],{"class":281},[271,1695,1696],{"class":356},"setConfig",[271,1698,405],{"class":285},[271,1700,408],{"class":281},[271,1702,1703,1705,1707,1709,1711,1713,1715,1717,1719],{"class":273,"line":494},[271,1704,414],{"class":413},[271,1706,417],{"class":281},[271,1708,282],{"class":281},[271,1710,422],{"class":413},[271,1712,417],{"class":281},[271,1714,295],{"class":281},[271,1716,429],{"class":298},[271,1718,302],{"class":281},[271,1720,760],{"class":281},[271,1722,1723,1725,1727,1729,1731,1734],{"class":273,"line":502},[271,1724,679],{"class":413},[271,1726,417],{"class":281},[271,1728,684],{"class":285},[271,1730,399],{"class":281},[271,1732,1733],{"class":285},"SM",[271,1735,484],{"class":281},[271,1737,1738,1740,1742,1744,1746,1749],{"class":273,"line":510},[271,1739,697],{"class":413},[271,1741,417],{"class":281},[271,1743,702],{"class":285},[271,1745,399],{"class":281},[271,1747,1748],{"class":285},"SQUARE",[271,1750,484],{"class":281},[271,1752,1753,1755,1757],{"class":273,"line":525},[271,1754,439],{"class":281},[271,1756,442],{"class":285},[271,1758,305],{"class":281},[1760,1761,1763],"callout",{"icon":1762,"to":29},"i-lucide-arrow-right",[257,1764,1765,1766,1769],{},"For full config reference — video, size, shape, position, UI elements — see the ",[1767,1768,23],"strong",{}," section.",[1771,1772,1773],"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 .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);}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 pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":266,"searchDepth":274,"depth":308,"links":1775},[1776,1777,1778,1779,1780],{"id":246,"depth":308,"text":247},{"id":452,"depth":308,"text":453},{"id":772,"depth":308,"text":773},{"id":1063,"depth":308,"text":1064},{"id":1452,"depth":308,"text":1453},"Mount your first video widget in under 5 minutes.","md",null,{},{"title":19,"description":1781},"Kr4K2axOEd6vbFPMmx2O2ZT6SasgGSaka7dswrute5I",[1788,1790],{"title":15,"path":16,"stem":17,"description":1789,"children":-1},"Install @retoo/scena via npm, pnpm, yarn, or connect via CDN.",{"title":28,"path":29,"stem":30,"description":1791,"children":-1},"Structure of ScenaConfig and the principle of disabling components with false.",1777984319402]