[{"data":1,"prerenderedAt":805},["ShallowReactive",2],{"navigation":3,"/api-reference/preview-api":238,"/api-reference/preview-api-surround":800},[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":135,"body":240,"description":794,"extension":795,"links":796,"meta":797,"navigation":449,"path":136,"seo":798,"stem":137,"__hash__":799},"docs/05.api-reference/7.preview-api.md",{"type":241,"value":242,"toc":788},"minimark",[243,252,290,295,361,365,410,413,599,602,605,773,784],[244,245,246,247,251],"p",{},"The preview API is available at ",[248,249,250],"code",{},"instance.preview",". It controls the preview mode — a temporary visual state with config overrides that reverts when the user interacts with the widget.",[253,254,259],"pre",{"className":255,"code":256,"language":257,"meta":258,"style":258},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const preview = instance.preview;\n","ts","",[248,260,261],{"__ignoreMap":258},[262,263,266,270,274,278,281,284,287],"span",{"class":264,"line":265},"line",1,[262,267,269],{"class":268},"spNyl","const",[262,271,273],{"class":272},"sTEyZ"," preview ",[262,275,277],{"class":276},"sMK4o","=",[262,279,280],{"class":272}," instance",[262,282,283],{"class":276},".",[262,285,286],{"class":272},"preview",[262,288,289],{"class":276},";\n",[291,292,294],"h2",{"id":293},"properties","Properties",[296,297,298,314],"table",{},[299,300,301],"thead",{},[302,303,304,308,311],"tr",{},[305,306,307],"th",{},"Property",[305,309,310],{},"Type",[305,312,313],{},"Description",[315,316,317,333,347],"tbody",{},[302,318,319,325,330],{},[320,321,322],"td",{},[248,323,324],{},"isPreviewing",[320,326,327],{},[248,328,329],{},"boolean",[320,331,332],{},"Whether preview mode is currently active",[302,334,335,340,344],{},[320,336,337],{},[248,338,339],{},"isKeepTimeOnExpand",[320,341,342],{},[248,343,329],{},[320,345,346],{},"Whether video position is preserved when expanding from preview",[302,348,349,354,358],{},[320,350,351],{},[248,352,353],{},"isKeepMuteOnExpand",[320,355,356],{},[248,357,329],{},[320,359,360],{},"Whether mute state is preserved when expanding from preview",[291,362,364],{"id":363},"methods","Methods",[296,366,367,379],{},[299,368,369],{},[302,370,371,374,377],{},[305,372,373],{},"Method",[305,375,376],{},"Signature",[305,378,313],{},[315,380,381,396],{},[302,382,383,388,393],{},[320,384,385],{},[248,386,387],{},"start",[320,389,390],{},[248,391,392],{},"() => void",[320,394,395],{},"Activate preview mode, applying config overrides",[302,397,398,403,407],{},[320,399,400],{},[248,401,402],{},"stop",[320,404,405],{},[248,406,392],{},[320,408,409],{},"Deactivate preview mode, removing overrides",[291,411,169],{"id":412},"usage",[253,414,416],{"className":255,"code":415,"language":257,"meta":258,"style":258},"// Start preview manually\ninstance.preview.start();\n\n// Stop preview\ninstance.preview.stop();\n\n// Check state\nif (instance.preview.isPreviewing) {\n  console.log('Preview is active');\n}\n\n// Read behavior flags set via config\nconsole.log(instance.preview.isKeepTimeOnExpand);\nconsole.log(instance.preview.isKeepMuteOnExpand);\n",[248,417,418,424,444,451,457,474,479,485,507,536,542,547,553,577],{"__ignoreMap":258},[262,419,420],{"class":264,"line":265},[262,421,423],{"class":422},"sHwdD","// Start preview manually\n",[262,425,427,430,432,434,436,439,442],{"class":264,"line":426},2,[262,428,429],{"class":272},"instance",[262,431,283],{"class":276},[262,433,286],{"class":272},[262,435,283],{"class":276},[262,437,387],{"class":438},"s2Zo4",[262,440,441],{"class":272},"()",[262,443,289],{"class":276},[262,445,447],{"class":264,"line":446},3,[262,448,450],{"emptyLinePlaceholder":449},true,"\n",[262,452,454],{"class":264,"line":453},4,[262,455,456],{"class":422},"// Stop preview\n",[262,458,460,462,464,466,468,470,472],{"class":264,"line":459},5,[262,461,429],{"class":272},[262,463,283],{"class":276},[262,465,286],{"class":272},[262,467,283],{"class":276},[262,469,402],{"class":438},[262,471,441],{"class":272},[262,473,289],{"class":276},[262,475,477],{"class":264,"line":476},6,[262,478,450],{"emptyLinePlaceholder":449},[262,480,482],{"class":264,"line":481},7,[262,483,484],{"class":422},"// Check state\n",[262,486,488,492,495,497,499,501,504],{"class":264,"line":487},8,[262,489,491],{"class":490},"s7zQu","if",[262,493,494],{"class":272}," (instance",[262,496,283],{"class":276},[262,498,286],{"class":272},[262,500,283],{"class":276},[262,502,503],{"class":272},"isPreviewing) ",[262,505,506],{"class":276},"{\n",[262,508,510,513,515,518,522,525,529,531,534],{"class":264,"line":509},9,[262,511,512],{"class":272},"  console",[262,514,283],{"class":276},[262,516,517],{"class":438},"log",[262,519,521],{"class":520},"swJcz","(",[262,523,524],{"class":276},"'",[262,526,528],{"class":527},"sfazB","Preview is active",[262,530,524],{"class":276},[262,532,533],{"class":520},")",[262,535,289],{"class":276},[262,537,539],{"class":264,"line":538},10,[262,540,541],{"class":276},"}\n",[262,543,545],{"class":264,"line":544},11,[262,546,450],{"emptyLinePlaceholder":449},[262,548,550],{"class":264,"line":549},12,[262,551,552],{"class":422},"// Read behavior flags set via config\n",[262,554,556,559,561,563,566,568,570,572,575],{"class":264,"line":555},13,[262,557,558],{"class":272},"console",[262,560,283],{"class":276},[262,562,517],{"class":438},[262,564,565],{"class":272},"(instance",[262,567,283],{"class":276},[262,569,286],{"class":272},[262,571,283],{"class":276},[262,573,574],{"class":272},"isKeepTimeOnExpand)",[262,576,289],{"class":276},[262,578,580,582,584,586,588,590,592,594,597],{"class":264,"line":579},14,[262,581,558],{"class":272},[262,583,283],{"class":276},[262,585,517],{"class":438},[262,587,565],{"class":272},[262,589,283],{"class":276},[262,591,286],{"class":272},[262,593,283],{"class":276},[262,595,596],{"class":272},"isKeepMuteOnExpand)",[262,598,289],{"class":276},[291,600,139],{"id":601},"events",[244,603,604],{},"Preview state changes emit events on the event bus:",[253,606,608],{"className":255,"code":607,"language":257,"meta":258,"style":258},"import { ScenaEvent } from '@retoo/scena';\n\ninstance.api.events.on(ScenaEvent.ON_PREVIEW_START, () => {\n  console.log('Preview activated');\n});\n\ninstance.api.events.on(ScenaEvent.ON_PREVIEW_STOP, () => {\n  console.log('Preview deactivated');\n});\n",[248,609,610,637,641,679,700,709,713,744,765],{"__ignoreMap":258},[262,611,612,615,618,621,624,627,630,633,635],{"class":264,"line":265},[262,613,614],{"class":490},"import",[262,616,617],{"class":276}," {",[262,619,620],{"class":272}," ScenaEvent",[262,622,623],{"class":276}," }",[262,625,626],{"class":490}," from",[262,628,629],{"class":276}," '",[262,631,632],{"class":527},"@retoo/scena",[262,634,524],{"class":276},[262,636,289],{"class":276},[262,638,639],{"class":264,"line":426},[262,640,450],{"emptyLinePlaceholder":449},[262,642,643,645,647,650,652,654,656,659,662,664,667,670,673,676],{"class":264,"line":446},[262,644,429],{"class":272},[262,646,283],{"class":276},[262,648,649],{"class":272},"api",[262,651,283],{"class":276},[262,653,601],{"class":272},[262,655,283],{"class":276},[262,657,658],{"class":438},"on",[262,660,661],{"class":272},"(ScenaEvent",[262,663,283],{"class":276},[262,665,666],{"class":272},"ON_PREVIEW_START",[262,668,669],{"class":276},",",[262,671,672],{"class":276}," ()",[262,674,675],{"class":268}," =>",[262,677,678],{"class":276}," {\n",[262,680,681,683,685,687,689,691,694,696,698],{"class":264,"line":453},[262,682,512],{"class":272},[262,684,283],{"class":276},[262,686,517],{"class":438},[262,688,521],{"class":520},[262,690,524],{"class":276},[262,692,693],{"class":527},"Preview activated",[262,695,524],{"class":276},[262,697,533],{"class":520},[262,699,289],{"class":276},[262,701,702,705,707],{"class":264,"line":459},[262,703,704],{"class":276},"}",[262,706,533],{"class":272},[262,708,289],{"class":276},[262,710,711],{"class":264,"line":476},[262,712,450],{"emptyLinePlaceholder":449},[262,714,715,717,719,721,723,725,727,729,731,733,736,738,740,742],{"class":264,"line":481},[262,716,429],{"class":272},[262,718,283],{"class":276},[262,720,649],{"class":272},[262,722,283],{"class":276},[262,724,601],{"class":272},[262,726,283],{"class":276},[262,728,658],{"class":438},[262,730,661],{"class":272},[262,732,283],{"class":276},[262,734,735],{"class":272},"ON_PREVIEW_STOP",[262,737,669],{"class":276},[262,739,672],{"class":276},[262,741,675],{"class":268},[262,743,678],{"class":276},[262,745,746,748,750,752,754,756,759,761,763],{"class":264,"line":487},[262,747,512],{"class":272},[262,749,283],{"class":276},[262,751,517],{"class":438},[262,753,521],{"class":520},[262,755,524],{"class":276},[262,757,758],{"class":527},"Preview deactivated",[262,760,524],{"class":276},[262,762,533],{"class":520},[262,764,289],{"class":276},[262,766,767,769,771],{"class":264,"line":509},[262,768,704],{"class":276},[262,770,533],{"class":272},[262,772,289],{"class":276},[774,775,777],"callout",{"icon":776,"to":95},"i-lucide-arrow-right",[244,778,779,780,783],{},"See ",[781,782,94],"strong",{}," feature guide for config structure and how overrides are applied.",[785,786,787],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":258,"searchDepth":265,"depth":426,"links":789},[790,791,792,793],{"id":293,"depth":426,"text":294},{"id":363,"depth":426,"text":364},{"id":412,"depth":426,"text":169},{"id":601,"depth":426,"text":139},"Control preview mode with start(), stop(), and isPreviewing state.","md",null,{},{"title":135,"description":794},"ZgGQ1JzYBOfcFqQvHHCNNY2WMpDHxvzXH9rDUzyBxIc",[801,803],{"title":131,"path":132,"stem":133,"description":802,"children":-1},"Programmatically show and hide the widget with show(), hide(), isHidden, and isShownOnReady.",{"title":144,"path":145,"stem":146,"description":804,"children":-1},"Handle widget mounting and destruction with ON_SCENA_MOUNT and ON_SCENA_DESTROY.",1777984323302]