[{"data":1,"prerenderedAt":668},["ShallowReactive",2],{"navigation":3,"/events/widget-events":238,"/events/widget-events-surround":663},[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":144,"body":240,"description":657,"extension":658,"links":659,"meta":660,"navigation":358,"path":145,"seo":661,"stem":146,"__hash__":662},"docs/06.events/1.widget-events.md",{"type":241,"value":242,"toc":651},"minimark",[243,247,251,305,308,506,510,517,629,633,647],[244,245,246],"p",{},"Widget events fire when the scena instance is mounted into the DOM and when it is destroyed. They carry no payload and require no arguments in the handler. These events are useful for running setup or teardown logic tied to the widget's DOM presence.",[248,249,139],"h2",{"id":250},"events",[252,253,254,270],"table",{},[255,256,257],"thead",{},[258,259,260,264,267],"tr",{},[261,262,263],"th",{},"Event",[261,265,266],{},"String value",[261,268,269],{},"When",[271,272,273,290],"tbody",{},[258,274,275,282,287],{},[276,277,278],"td",{},[279,280,281],"code",{},"ON_SCENA_MOUNT",[276,283,284],{},[279,285,286],{},"scena:on-mount",[276,288,289],{},"Widget component is mounted and ready",[258,291,292,297,302],{},[276,293,294],{},[279,295,296],{},"ON_SCENA_DESTROY",[276,298,299],{},[279,300,301],{},"scena:on-destroy",[276,303,304],{},"Widget is about to be destroyed, before cleanup",[248,306,169],{"id":307},"usage",[309,310,315],"pre",{"className":311,"code":312,"language":313,"meta":314,"style":314},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ScenaEvent } from '@retoo/scena';\n\ninstance.api.events.on(ScenaEvent.ON_SCENA_MOUNT, () => {\n  console.log('Widget is ready');\n});\n\ninstance.api.events.on(ScenaEvent.ON_SCENA_DESTROY, () => {\n  console.log('Widget is being destroyed');\n});\n","ts","",[279,316,317,353,360,402,429,439,444,475,497],{"__ignoreMap":314},[318,319,322,326,330,334,337,340,343,347,350],"span",{"class":320,"line":321},"line",1,[318,323,325],{"class":324},"s7zQu","import",[318,327,329],{"class":328},"sMK4o"," {",[318,331,333],{"class":332},"sTEyZ"," ScenaEvent",[318,335,336],{"class":328}," }",[318,338,339],{"class":324}," from",[318,341,342],{"class":328}," '",[318,344,346],{"class":345},"sfazB","@retoo/scena",[318,348,349],{"class":328},"'",[318,351,352],{"class":328},";\n",[318,354,356],{"class":320,"line":355},2,[318,357,359],{"emptyLinePlaceholder":358},true,"\n",[318,361,363,366,369,372,374,376,378,382,385,387,389,392,395,399],{"class":320,"line":362},3,[318,364,365],{"class":332},"instance",[318,367,368],{"class":328},".",[318,370,371],{"class":332},"api",[318,373,368],{"class":328},[318,375,250],{"class":332},[318,377,368],{"class":328},[318,379,381],{"class":380},"s2Zo4","on",[318,383,384],{"class":332},"(ScenaEvent",[318,386,368],{"class":328},[318,388,281],{"class":332},[318,390,391],{"class":328},",",[318,393,394],{"class":328}," ()",[318,396,398],{"class":397},"spNyl"," =>",[318,400,401],{"class":328}," {\n",[318,403,405,408,410,413,417,419,422,424,427],{"class":320,"line":404},4,[318,406,407],{"class":332},"  console",[318,409,368],{"class":328},[318,411,412],{"class":380},"log",[318,414,416],{"class":415},"swJcz","(",[318,418,349],{"class":328},[318,420,421],{"class":345},"Widget is ready",[318,423,349],{"class":328},[318,425,426],{"class":415},")",[318,428,352],{"class":328},[318,430,432,435,437],{"class":320,"line":431},5,[318,433,434],{"class":328},"}",[318,436,426],{"class":332},[318,438,352],{"class":328},[318,440,442],{"class":320,"line":441},6,[318,443,359],{"emptyLinePlaceholder":358},[318,445,447,449,451,453,455,457,459,461,463,465,467,469,471,473],{"class":320,"line":446},7,[318,448,365],{"class":332},[318,450,368],{"class":328},[318,452,371],{"class":332},[318,454,368],{"class":328},[318,456,250],{"class":332},[318,458,368],{"class":328},[318,460,381],{"class":380},[318,462,384],{"class":332},[318,464,368],{"class":328},[318,466,296],{"class":332},[318,468,391],{"class":328},[318,470,394],{"class":328},[318,472,398],{"class":397},[318,474,401],{"class":328},[318,476,478,480,482,484,486,488,491,493,495],{"class":320,"line":477},8,[318,479,407],{"class":332},[318,481,368],{"class":328},[318,483,412],{"class":380},[318,485,416],{"class":415},[318,487,349],{"class":328},[318,489,490],{"class":345},"Widget is being destroyed",[318,492,349],{"class":328},[318,494,426],{"class":415},[318,496,352],{"class":328},[318,498,500,502,504],{"class":320,"line":499},9,[318,501,434],{"class":328},[318,503,426],{"class":332},[318,505,352],{"class":328},[248,507,509],{"id":508},"unsubscribing","Unsubscribing",[244,511,512,513,516],{},"Pass the same handler reference to ",[279,514,515],{},"off()",":",[309,518,520],{"className":311,"code":519,"language":313,"meta":314,"style":314},"const onMount = () => console.log('Mounted');\n\ninstance.api.events.on(ScenaEvent.ON_SCENA_MOUNT, onMount);\n\n// Later\ninstance.api.events.off(ScenaEvent.ON_SCENA_MOUNT, onMount);\n",[279,521,522,557,561,590,594,600],{"__ignoreMap":314},[318,523,524,527,530,533,535,537,540,542,544,546,548,551,553,555],{"class":320,"line":321},[318,525,526],{"class":397},"const",[318,528,529],{"class":332}," onMount ",[318,531,532],{"class":328},"=",[318,534,394],{"class":328},[318,536,398],{"class":397},[318,538,539],{"class":332}," console",[318,541,368],{"class":328},[318,543,412],{"class":380},[318,545,416],{"class":332},[318,547,349],{"class":328},[318,549,550],{"class":345},"Mounted",[318,552,349],{"class":328},[318,554,426],{"class":332},[318,556,352],{"class":328},[318,558,559],{"class":320,"line":355},[318,560,359],{"emptyLinePlaceholder":358},[318,562,563,565,567,569,571,573,575,577,579,581,583,585,588],{"class":320,"line":362},[318,564,365],{"class":332},[318,566,368],{"class":328},[318,568,371],{"class":332},[318,570,368],{"class":328},[318,572,250],{"class":332},[318,574,368],{"class":328},[318,576,381],{"class":380},[318,578,384],{"class":332},[318,580,368],{"class":328},[318,582,281],{"class":332},[318,584,391],{"class":328},[318,586,587],{"class":332}," onMount)",[318,589,352],{"class":328},[318,591,592],{"class":320,"line":404},[318,593,359],{"emptyLinePlaceholder":358},[318,595,596],{"class":320,"line":431},[318,597,599],{"class":598},"sHwdD","// Later\n",[318,601,602,604,606,608,610,612,614,617,619,621,623,625,627],{"class":320,"line":441},[318,603,365],{"class":332},[318,605,368],{"class":328},[318,607,371],{"class":332},[318,609,368],{"class":328},[318,611,250],{"class":332},[318,613,368],{"class":328},[318,615,616],{"class":380},"off",[318,618,384],{"class":332},[318,620,368],{"class":328},[318,622,281],{"class":332},[318,624,391],{"class":328},[318,626,587],{"class":332},[318,628,352],{"class":328},[248,630,632],{"id":631},"notes","Notes",[634,635,636,642],"ul",{},[637,638,639,641],"li",{},[279,640,281],{}," fires after the Svelte component is mounted — the DOM is fully rendered at this point, so it is safe to query elements or initialize libraries that depend on the DOM.",[637,643,644,646],{},[279,645,296],{}," fires before cleanup. After this event, the event emitter is cleared and all handlers are removed automatically, so there is no need to unsubscribe manually.",[648,649,650],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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}",{"title":314,"searchDepth":321,"depth":355,"links":652},[653,654,655,656],{"id":250,"depth":355,"text":139},{"id":307,"depth":355,"text":169},{"id":508,"depth":355,"text":509},{"id":631,"depth":355,"text":632},"Handle widget mounting and destruction with ON_SCENA_MOUNT and ON_SCENA_DESTROY.","md",null,{},{"title":144,"description":657},"Mp5PsP-GZrsLMeALCcGGVTh1zqhmYn53Qp2yjG1f0fk",[664,666],{"title":135,"path":136,"stem":137,"description":665,"children":-1},"Control preview mode with start(), stop(), and isPreviewing state.",{"title":148,"path":149,"stem":150,"description":667,"children":-1},"React to playback state changes — play, pause, ended, seeking, time update, volume change, buffering, and errors.",1777984317920]