[{"data":1,"prerenderedAt":699},["ShallowReactive",2],{"navigation":3,"/events/feature-events":238,"/events/feature-events-surround":694},[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":152,"body":240,"description":688,"extension":689,"links":690,"meta":691,"navigation":356,"path":153,"seo":692,"stem":154,"__hash__":693},"docs/06.events/3.feature-events.md",{"type":241,"value":242,"toc":684},"minimark",[243,247,252,306,505,509,553,680],[244,245,246],"p",{},"Feature events fire when the widget's visibility or preview mode changes. They carry no payload.",[248,249,251],"h2",{"id":250},"visibility-events","Visibility Events",[253,254,255,271],"table",{},[256,257,258],"thead",{},[259,260,261,265,268],"tr",{},[262,263,264],"th",{},"Event",[262,266,267],{},"String value",[262,269,270],{},"When",[272,273,274,291],"tbody",{},[259,275,276,283,288],{},[277,278,279],"td",{},[280,281,282],"code",{},"ON_VISIBILITY_SHOW",[277,284,285],{},[280,286,287],{},"visibility:show",[277,289,290],{},"Widget becomes visible",[259,292,293,298,303],{},[277,294,295],{},[280,296,297],{},"ON_VISIBILITY_HIDE",[277,299,300],{},[280,301,302],{},"visibility:hide",[277,304,305],{},"Widget becomes hidden",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"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_VISIBILITY_SHOW, () => {\n  console.log('Widget is visible');\n});\n\ninstance.api.events.on(ScenaEvent.ON_VISIBILITY_HIDE, () => {\n  console.log('Widget is hidden');\n});\n","ts","",[280,314,315,351,358,401,428,438,443,474,496],{"__ignoreMap":312},[316,317,320,324,328,332,335,338,341,345,348],"span",{"class":318,"line":319},"line",1,[316,321,323],{"class":322},"s7zQu","import",[316,325,327],{"class":326},"sMK4o"," {",[316,329,331],{"class":330},"sTEyZ"," ScenaEvent",[316,333,334],{"class":326}," }",[316,336,337],{"class":322}," from",[316,339,340],{"class":326}," '",[316,342,344],{"class":343},"sfazB","@retoo/scena",[316,346,347],{"class":326},"'",[316,349,350],{"class":326},";\n",[316,352,354],{"class":318,"line":353},2,[316,355,357],{"emptyLinePlaceholder":356},true,"\n",[316,359,361,364,367,370,372,375,377,381,384,386,388,391,394,398],{"class":318,"line":360},3,[316,362,363],{"class":330},"instance",[316,365,366],{"class":326},".",[316,368,369],{"class":330},"api",[316,371,366],{"class":326},[316,373,374],{"class":330},"events",[316,376,366],{"class":326},[316,378,380],{"class":379},"s2Zo4","on",[316,382,383],{"class":330},"(ScenaEvent",[316,385,366],{"class":326},[316,387,282],{"class":330},[316,389,390],{"class":326},",",[316,392,393],{"class":326}," ()",[316,395,397],{"class":396},"spNyl"," =>",[316,399,400],{"class":326}," {\n",[316,402,404,407,409,412,416,418,421,423,426],{"class":318,"line":403},4,[316,405,406],{"class":330},"  console",[316,408,366],{"class":326},[316,410,411],{"class":379},"log",[316,413,415],{"class":414},"swJcz","(",[316,417,347],{"class":326},[316,419,420],{"class":343},"Widget is visible",[316,422,347],{"class":326},[316,424,425],{"class":414},")",[316,427,350],{"class":326},[316,429,431,434,436],{"class":318,"line":430},5,[316,432,433],{"class":326},"}",[316,435,425],{"class":330},[316,437,350],{"class":326},[316,439,441],{"class":318,"line":440},6,[316,442,357],{"emptyLinePlaceholder":356},[316,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472],{"class":318,"line":445},7,[316,447,363],{"class":330},[316,449,366],{"class":326},[316,451,369],{"class":330},[316,453,366],{"class":326},[316,455,374],{"class":330},[316,457,366],{"class":326},[316,459,380],{"class":379},[316,461,383],{"class":330},[316,463,366],{"class":326},[316,465,297],{"class":330},[316,467,390],{"class":326},[316,469,393],{"class":326},[316,471,397],{"class":396},[316,473,400],{"class":326},[316,475,477,479,481,483,485,487,490,492,494],{"class":318,"line":476},8,[316,478,406],{"class":330},[316,480,366],{"class":326},[316,482,411],{"class":379},[316,484,415],{"class":414},[316,486,347],{"class":326},[316,488,489],{"class":343},"Widget is hidden",[316,491,347],{"class":326},[316,493,425],{"class":414},[316,495,350],{"class":326},[316,497,499,501,503],{"class":318,"line":498},9,[316,500,433],{"class":326},[316,502,425],{"class":330},[316,504,350],{"class":326},[248,506,508],{"id":507},"preview-events","Preview Events",[253,510,511,521],{},[256,512,513],{},[259,514,515,517,519],{},[262,516,264],{},[262,518,267],{},[262,520,270],{},[272,522,523,538],{},[259,524,525,530,535],{},[277,526,527],{},[280,528,529],{},"ON_PREVIEW_START",[277,531,532],{},[280,533,534],{},"preview:start",[277,536,537],{},"Preview mode is activated",[259,539,540,545,550],{},[277,541,542],{},[280,543,544],{},"ON_PREVIEW_STOP",[277,546,547],{},[280,548,549],{},"preview:stop",[277,551,552],{},"Preview mode is deactivated",[307,554,556],{"className":309,"code":555,"language":311,"meta":312,"style":312},"instance.api.events.on(ScenaEvent.ON_PREVIEW_START, () => {\n  console.log('Preview started');\n});\n\ninstance.api.events.on(ScenaEvent.ON_PREVIEW_STOP, () => {\n  console.log('Preview stopped');\n});\n",[280,557,558,588,609,617,621,651,672],{"__ignoreMap":312},[316,559,560,562,564,566,568,570,572,574,576,578,580,582,584,586],{"class":318,"line":319},[316,561,363],{"class":330},[316,563,366],{"class":326},[316,565,369],{"class":330},[316,567,366],{"class":326},[316,569,374],{"class":330},[316,571,366],{"class":326},[316,573,380],{"class":379},[316,575,383],{"class":330},[316,577,366],{"class":326},[316,579,529],{"class":330},[316,581,390],{"class":326},[316,583,393],{"class":326},[316,585,397],{"class":396},[316,587,400],{"class":326},[316,589,590,592,594,596,598,600,603,605,607],{"class":318,"line":353},[316,591,406],{"class":330},[316,593,366],{"class":326},[316,595,411],{"class":379},[316,597,415],{"class":414},[316,599,347],{"class":326},[316,601,602],{"class":343},"Preview started",[316,604,347],{"class":326},[316,606,425],{"class":414},[316,608,350],{"class":326},[316,610,611,613,615],{"class":318,"line":360},[316,612,433],{"class":326},[316,614,425],{"class":330},[316,616,350],{"class":326},[316,618,619],{"class":318,"line":403},[316,620,357],{"emptyLinePlaceholder":356},[316,622,623,625,627,629,631,633,635,637,639,641,643,645,647,649],{"class":318,"line":430},[316,624,363],{"class":330},[316,626,366],{"class":326},[316,628,369],{"class":330},[316,630,366],{"class":326},[316,632,374],{"class":330},[316,634,366],{"class":326},[316,636,380],{"class":379},[316,638,383],{"class":330},[316,640,366],{"class":326},[316,642,544],{"class":330},[316,644,390],{"class":326},[316,646,393],{"class":326},[316,648,397],{"class":396},[316,650,400],{"class":326},[316,652,653,655,657,659,661,663,666,668,670],{"class":318,"line":440},[316,654,406],{"class":330},[316,656,366],{"class":326},[316,658,411],{"class":379},[316,660,415],{"class":414},[316,662,347],{"class":326},[316,664,665],{"class":343},"Preview stopped",[316,667,347],{"class":326},[316,669,425],{"class":414},[316,671,350],{"class":326},[316,673,674,676,678],{"class":318,"line":445},[316,675,433],{"class":326},[316,677,425],{"class":330},[316,679,350],{"class":326},[681,682,683],"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);}",{"title":312,"searchDepth":319,"depth":353,"links":685},[686,687],{"id":250,"depth":353,"text":251},{"id":507,"depth":353,"text":508},"React to visibility and preview state changes with show, hide, start, and stop events.","md",null,{},{"title":152,"description":688},"aklrvoztV1uj2Xfd83MrdY2iMGR_-cWDadBnYHYh5y0",[695,697],{"title":148,"path":149,"stem":150,"description":696,"children":-1},"React to playback state changes — play, pause, ended, seeking, time update, volume change, buffering, and errors.",{"title":156,"path":157,"stem":158,"description":698,"children":-1},"Handle user clicks on the video container, CTA button, and close button.",1777984323568]