[{"data":1,"prerenderedAt":898},["ShallowReactive",2],{"navigation":3,"/features/preview":238,"/features/preview-surround":893},[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":94,"body":240,"description":888,"extension":479,"links":889,"meta":890,"navigation":769,"path":95,"seo":891,"stem":96,"__hash__":892},"docs/04.features/1.preview.md",{"type":241,"value":242,"toc":881},"minimark",[243,247,250,255,267,274,466,481,486,489,553,698,702,721,728,732,735,877],[244,245,246],"p",{},"Preview mode applies temporary config overrides on top of the base config. When the user clicks the video container, preview mode stops and the widget returns to its original configuration.",[244,248,249],{},"This is useful for showing a compact or simplified version of the widget that expands on interaction — for example, a small circle that grows into a full portrait player with buttons and controls.",[251,252,254],"h2",{"id":253},"config","Config",[244,256,257,258,262,263,266],{},"The ",[259,260,261],"code",{},"preview"," key accepts the same shape as ",[259,264,265],{},"ScenaOverrides"," — size, shape, and any component property can be overridden — plus two behavioral options. The base config defines how the widget looks after preview ends, and the preview config defines how it looks before the user interacts:",[268,269,270],"scena-container",{},[271,272],"scena-component",{":config":273},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"preview\":{\"size\":\"sm\",\"shape\":\"circle\",\"closeButton\":false,\"ctaButton\":false}}",[275,276,281],"pre",{"className":277,"code":278,"language":279,"meta":280,"style":280},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  preview: {\n    size: ComponentSize.SM,\n    shape: ComponentShape.CIRCLE,\n    closeButton: false,\n    ctaButton: false,\n  },\n});\n","ts","",[259,282,283,310,341,360,378,389,406,422,436,448,454],{"__ignoreMap":280},[284,285,288,292,296,300,304,307],"span",{"class":286,"line":287},"line",1,[284,289,291],{"class":290},"s7zQu","await",[284,293,295],{"class":294},"sTEyZ"," scena",[284,297,299],{"class":298},"sMK4o",".",[284,301,303],{"class":302},"s2Zo4","mount",[284,305,306],{"class":294},"(",[284,308,309],{"class":298},"{\n",[284,311,313,317,320,323,326,328,331,335,338],{"class":286,"line":312},2,[284,314,316],{"class":315},"swJcz","  video",[284,318,319],{"class":298},":",[284,321,322],{"class":298}," {",[284,324,325],{"class":315}," src",[284,327,319],{"class":298},[284,329,330],{"class":298}," '",[284,332,334],{"class":333},"sfazB","/video.mp4",[284,336,337],{"class":298},"'",[284,339,340],{"class":298}," },\n",[284,342,344,347,349,352,354,357],{"class":286,"line":343},3,[284,345,346],{"class":315},"  size",[284,348,319],{"class":298},[284,350,351],{"class":294}," ComponentSize",[284,353,299],{"class":298},[284,355,356],{"class":294},"MD",[284,358,359],{"class":298},",\n",[284,361,363,366,368,371,373,376],{"class":286,"line":362},4,[284,364,365],{"class":315},"  shape",[284,367,319],{"class":298},[284,369,370],{"class":294}," ComponentShape",[284,372,299],{"class":298},[284,374,375],{"class":294},"CIRCLE",[284,377,359],{"class":298},[284,379,381,384,386],{"class":286,"line":380},5,[284,382,383],{"class":315},"  preview",[284,385,319],{"class":298},[284,387,388],{"class":298}," {\n",[284,390,392,395,397,399,401,404],{"class":286,"line":391},6,[284,393,394],{"class":315},"    size",[284,396,319],{"class":298},[284,398,351],{"class":294},[284,400,299],{"class":298},[284,402,403],{"class":294},"SM",[284,405,359],{"class":298},[284,407,409,412,414,416,418,420],{"class":286,"line":408},7,[284,410,411],{"class":315},"    shape",[284,413,319],{"class":298},[284,415,370],{"class":294},[284,417,299],{"class":298},[284,419,375],{"class":294},[284,421,359],{"class":298},[284,423,425,428,430,434],{"class":286,"line":424},8,[284,426,427],{"class":315},"    closeButton",[284,429,319],{"class":298},[284,431,433],{"class":432},"sfNiH"," false",[284,435,359],{"class":298},[284,437,439,442,444,446],{"class":286,"line":438},9,[284,440,441],{"class":315},"    ctaButton",[284,443,319],{"class":298},[284,445,433],{"class":432},[284,447,359],{"class":298},[284,449,451],{"class":286,"line":450},10,[284,452,453],{"class":298},"  },\n",[284,455,457,460,463],{"class":286,"line":456},11,[284,458,459],{"class":298},"}",[284,461,462],{"class":294},")",[284,464,465],{"class":298},";\n",[244,467,468,469,472,473,476,477,480],{},"When preview is active, the widget renders at ",[259,470,471],{},"sm"," / ",[259,474,475],{},"circle"," with no buttons. Clicking the video container stops preview and the widget transitions to ",[259,478,479],{},"md"," with all components visible.",[482,483,485],"h3",{"id":484},"behavior-options","Behavior options",[244,487,488],{},"Two boolean flags control what happens when preview stops:",[490,491,492,511],"table",{},[493,494,495],"thead",{},[496,497,498,502,505,508],"tr",{},[499,500,501],"th",{},"Option",[499,503,504],{},"Type",[499,506,507],{},"Default",[499,509,510],{},"Description",[512,513,514,535],"tbody",{},[496,515,516,522,527,532],{},[517,518,519],"td",{},[259,520,521],{},"keepTimeOnExpand",[517,523,524],{},[259,525,526],{},"boolean",[517,528,529],{},[259,530,531],{},"false",[517,533,534],{},"Preserve the current video position when expanding from preview",[496,536,537,542,546,550],{},[517,538,539],{},[259,540,541],{},"keepMuteOnExpand",[517,543,544],{},[259,545,526],{},[517,547,548],{},[259,549,531],{},[517,551,552],{},"Preserve the mute state when expanding from preview",[275,554,556],{"className":277,"code":555,"language":279,"meta":280,"style":280},"await scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  preview: {\n    size: ComponentSize.SM,\n    closeButton: false,\n    ctaButton: false,\n    keepTimeOnExpand: true,\n    keepMuteOnExpand: true,\n  },\n});\n",[259,557,558,572,592,606,620,628,642,652,662,674,685,689],{"__ignoreMap":280},[284,559,560,562,564,566,568,570],{"class":286,"line":287},[284,561,291],{"class":290},[284,563,295],{"class":294},[284,565,299],{"class":298},[284,567,303],{"class":302},[284,569,306],{"class":294},[284,571,309],{"class":298},[284,573,574,576,578,580,582,584,586,588,590],{"class":286,"line":312},[284,575,316],{"class":315},[284,577,319],{"class":298},[284,579,322],{"class":298},[284,581,325],{"class":315},[284,583,319],{"class":298},[284,585,330],{"class":298},[284,587,334],{"class":333},[284,589,337],{"class":298},[284,591,340],{"class":298},[284,593,594,596,598,600,602,604],{"class":286,"line":343},[284,595,346],{"class":315},[284,597,319],{"class":298},[284,599,351],{"class":294},[284,601,299],{"class":298},[284,603,356],{"class":294},[284,605,359],{"class":298},[284,607,608,610,612,614,616,618],{"class":286,"line":362},[284,609,365],{"class":315},[284,611,319],{"class":298},[284,613,370],{"class":294},[284,615,299],{"class":298},[284,617,375],{"class":294},[284,619,359],{"class":298},[284,621,622,624,626],{"class":286,"line":380},[284,623,383],{"class":315},[284,625,319],{"class":298},[284,627,388],{"class":298},[284,629,630,632,634,636,638,640],{"class":286,"line":391},[284,631,394],{"class":315},[284,633,319],{"class":298},[284,635,351],{"class":294},[284,637,299],{"class":298},[284,639,403],{"class":294},[284,641,359],{"class":298},[284,643,644,646,648,650],{"class":286,"line":408},[284,645,427],{"class":315},[284,647,319],{"class":298},[284,649,433],{"class":432},[284,651,359],{"class":298},[284,653,654,656,658,660],{"class":286,"line":424},[284,655,441],{"class":315},[284,657,319],{"class":298},[284,659,433],{"class":432},[284,661,359],{"class":298},[284,663,664,667,669,672],{"class":286,"line":438},[284,665,666],{"class":315},"    keepTimeOnExpand",[284,668,319],{"class":298},[284,670,671],{"class":432}," true",[284,673,359],{"class":298},[284,675,676,679,681,683],{"class":286,"line":450},[284,677,678],{"class":315},"    keepMuteOnExpand",[284,680,319],{"class":298},[284,682,671],{"class":432},[284,684,359],{"class":298},[284,686,687],{"class":286,"line":456},[284,688,453],{"class":298},[284,690,692,694,696],{"class":286,"line":691},12,[284,693,459],{"class":298},[284,695,462],{"class":294},[284,697,465],{"class":298},[251,699,701],{"id":700},"how-it-works","How it works",[703,704,705,712,715,718],"ol",{},[706,707,708,709,711],"li",{},"If ",[259,710,261],{}," is present in the config, preview mode activates automatically on mount.",[706,713,714],{},"Preview overrides are layered on top of the base config — the original config is never mutated.",[706,716,717],{},"Clicking the video container stops preview mode and removes the overrides.",[706,719,720],{},"The widget re-renders with the base config values immediately after preview stops.",[244,722,723,724,727],{},"During preview, the video container receives the ",[259,725,726],{},"rs-video-container--preview"," CSS class for custom styling.",[251,729,731],{"id":730},"runtime-api","Runtime API",[244,733,734],{},"Control preview through the instance:",[275,736,738],{"className":277,"code":737,"language":279,"meta":280,"style":280},"// Start preview (applies overrides)\ninstance.preview.start();\n\n// Stop preview (removes overrides)\ninstance.preview.stop();\n\n// Check current state\nconsole.log(instance.preview.isPreviewing);\n\n// Read behavior flags set via config\nconsole.log(instance.preview.isKeepTimeOnExpand);\nconsole.log(instance.preview.isKeepMuteOnExpand);\n",[259,739,740,746,765,771,776,793,797,802,826,830,835,856],{"__ignoreMap":280},[284,741,742],{"class":286,"line":287},[284,743,745],{"class":744},"sHwdD","// Start preview (applies overrides)\n",[284,747,748,751,753,755,757,760,763],{"class":286,"line":312},[284,749,750],{"class":294},"instance",[284,752,299],{"class":298},[284,754,261],{"class":294},[284,756,299],{"class":298},[284,758,759],{"class":302},"start",[284,761,762],{"class":294},"()",[284,764,465],{"class":298},[284,766,767],{"class":286,"line":343},[284,768,770],{"emptyLinePlaceholder":769},true,"\n",[284,772,773],{"class":286,"line":362},[284,774,775],{"class":744},"// Stop preview (removes overrides)\n",[284,777,778,780,782,784,786,789,791],{"class":286,"line":380},[284,779,750],{"class":294},[284,781,299],{"class":298},[284,783,261],{"class":294},[284,785,299],{"class":298},[284,787,788],{"class":302},"stop",[284,790,762],{"class":294},[284,792,465],{"class":298},[284,794,795],{"class":286,"line":391},[284,796,770],{"emptyLinePlaceholder":769},[284,798,799],{"class":286,"line":408},[284,800,801],{"class":744},"// Check current state\n",[284,803,804,807,809,812,815,817,819,821,824],{"class":286,"line":424},[284,805,806],{"class":294},"console",[284,808,299],{"class":298},[284,810,811],{"class":302},"log",[284,813,814],{"class":294},"(instance",[284,816,299],{"class":298},[284,818,261],{"class":294},[284,820,299],{"class":298},[284,822,823],{"class":294},"isPreviewing)",[284,825,465],{"class":298},[284,827,828],{"class":286,"line":438},[284,829,770],{"emptyLinePlaceholder":769},[284,831,832],{"class":286,"line":450},[284,833,834],{"class":744},"// Read behavior flags set via config\n",[284,836,837,839,841,843,845,847,849,851,854],{"class":286,"line":456},[284,838,806],{"class":294},[284,840,299],{"class":298},[284,842,811],{"class":302},[284,844,814],{"class":294},[284,846,299],{"class":298},[284,848,261],{"class":294},[284,850,299],{"class":298},[284,852,853],{"class":294},"isKeepTimeOnExpand)",[284,855,465],{"class":298},[284,857,858,860,862,864,866,868,870,872,875],{"class":286,"line":691},[284,859,806],{"class":294},[284,861,299],{"class":298},[284,863,811],{"class":302},[284,865,814],{"class":294},[284,867,299],{"class":298},[284,869,261],{"class":294},[284,871,299],{"class":298},[284,873,874],{"class":294},"isKeepMuteOnExpand)",[284,876,465],{"class":298},[878,879,880],"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 .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 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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}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":280,"searchDepth":287,"depth":312,"links":882},[883,886,887],{"id":253,"depth":312,"text":254,"children":884},[885],{"id":484,"depth":343,"text":485},{"id":700,"depth":312,"text":701},{"id":730,"depth":312,"text":731},"Configure preview mode with temporary visual overrides before the user interacts with the widget.",null,{},{"title":94,"description":888},"gmbCtC2BNtyEwNT7ZFYMeRdMk1Vj-F0xHUK7QDioOj4",[894,896],{"title":85,"path":86,"stem":87,"description":895,"children":-1},"Configure or disable the volume control component.",{"title":98,"path":99,"stem":100,"description":897,"children":-1},"Control widget visibility with isHidden, isShownOnReady, and animated transitions.",1777984317791]