[{"data":1,"prerenderedAt":919},["ShallowReactive",2],{"navigation":3,"/custom-element/usage":238,"/custom-element/usage-surround":914},[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":169,"body":240,"description":908,"extension":909,"links":910,"meta":911,"navigation":340,"path":170,"seo":912,"stem":171,"__hash__":913},"docs/07.custom-element/2.usage.md",{"type":241,"value":242,"toc":902},"minimark",[243,256,287,443,454,459,469,593,596,685,689,699,725,735,739,760,771,775,898],[244,245,246,247,251,252,255],"p",{},"Add the element to HTML and call ",[248,249,250],"code",{},".mount()"," with a ",[248,253,254],{},"ScenaConfig",":",[257,258,264],"pre",{"className":259,"code":260,"filename":261,"language":262,"meta":263,"style":263},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscena-video-widget>\u003C/scena-video-widget>\n","page.html","html","",[248,265,266],{"__ignoreMap":263},[267,268,271,275,279,282,284],"span",{"class":269,"line":270},"line",1,[267,272,274],{"class":273},"sMK4o","\u003C",[267,276,278],{"class":277},"swJcz","scena-video-widget",[267,280,281],{"class":273},">\u003C/",[267,283,278],{"class":277},[267,285,286],{"class":273},">\n",[257,288,293],{"className":289,"code":290,"filename":291,"language":292,"meta":263,"style":263},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const el = document.querySelector('scena-video-widget');\n\nconst instance = await el.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n});\n","app.ts","ts",[248,294,295,335,342,369,396,415,433],{"__ignoreMap":263},[267,296,297,301,305,308,311,314,318,321,324,327,329,332],{"class":269,"line":270},[267,298,300],{"class":299},"spNyl","const",[267,302,304],{"class":303},"sTEyZ"," el ",[267,306,307],{"class":273},"=",[267,309,310],{"class":303}," document",[267,312,313],{"class":273},".",[267,315,317],{"class":316},"s2Zo4","querySelector",[267,319,320],{"class":303},"(",[267,322,323],{"class":273},"'",[267,325,278],{"class":326},"sfazB",[267,328,323],{"class":273},[267,330,331],{"class":303},")",[267,333,334],{"class":273},";\n",[267,336,338],{"class":269,"line":337},2,[267,339,341],{"emptyLinePlaceholder":340},true,"\n",[267,343,345,347,350,352,356,359,361,364,366],{"class":269,"line":344},3,[267,346,300],{"class":299},[267,348,349],{"class":303}," instance ",[267,351,307],{"class":273},[267,353,355],{"class":354},"s7zQu"," await",[267,357,358],{"class":303}," el",[267,360,313],{"class":273},[267,362,363],{"class":316},"mount",[267,365,320],{"class":303},[267,367,368],{"class":273},"{\n",[267,370,372,375,377,380,383,385,388,391,393],{"class":269,"line":371},4,[267,373,374],{"class":277},"  video",[267,376,255],{"class":273},[267,378,379],{"class":273}," {",[267,381,382],{"class":277}," src",[267,384,255],{"class":273},[267,386,387],{"class":273}," '",[267,389,390],{"class":326},"/video.mp4",[267,392,323],{"class":273},[267,394,395],{"class":273}," },\n",[267,397,399,402,404,407,409,412],{"class":269,"line":398},5,[267,400,401],{"class":277},"  size",[267,403,255],{"class":273},[267,405,406],{"class":303}," ComponentSize",[267,408,313],{"class":273},[267,410,411],{"class":303},"MD",[267,413,414],{"class":273},",\n",[267,416,418,421,423,426,428,431],{"class":269,"line":417},6,[267,419,420],{"class":277},"  shape",[267,422,255],{"class":273},[267,424,425],{"class":303}," ComponentShape",[267,427,313],{"class":273},[267,429,430],{"class":303},"CIRCLE",[267,432,414],{"class":273},[267,434,436,439,441],{"class":269,"line":435},7,[267,437,438],{"class":273},"}",[267,440,331],{"class":303},[267,442,334],{"class":273},[244,444,445,446,449,450,453],{},"The method returns a ",[248,447,448],{},"Promise\u003CScenaInstance>"," — the same instance object you get when mounting through ",[248,451,452],{},"scena.mount()",", with full access to the widget API, config, visibility, and preview controls.",[455,456,458],"h2",{"id":457},"updating-config","Updating config",[244,460,461,462,464,465,468],{},"If the widget is already mounted, a repeated call to ",[248,463,250],{}," will not create a new instance. Instead, it updates the existing config through ",[248,466,467],{},"setConfig()",", keeping the current widget state intact:",[257,470,472],{"className":289,"code":471,"language":292,"meta":263,"style":263},"// First call — mounts the widget\nawait el.mount({ video: { src: '/video.mp4' }, size: ComponentSize.SM });\n\n// Second call — updates the constants without remounting\nawait el.mount({ video: { src: '/other.mp4' }, size: ComponentSize.LG });\n",[248,473,474,480,534,538,543],{"__ignoreMap":263},[267,475,476],{"class":269,"line":270},[267,477,479],{"class":478},"sHwdD","// First call — mounts the widget\n",[267,481,482,485,487,489,491,493,496,499,501,503,505,507,509,511,513,516,519,521,523,525,528,530,532],{"class":269,"line":337},[267,483,484],{"class":354},"await",[267,486,358],{"class":303},[267,488,313],{"class":273},[267,490,363],{"class":316},[267,492,320],{"class":303},[267,494,495],{"class":273},"{",[267,497,498],{"class":277}," video",[267,500,255],{"class":273},[267,502,379],{"class":273},[267,504,382],{"class":277},[267,506,255],{"class":273},[267,508,387],{"class":273},[267,510,390],{"class":326},[267,512,323],{"class":273},[267,514,515],{"class":273}," },",[267,517,518],{"class":277}," size",[267,520,255],{"class":273},[267,522,406],{"class":303},[267,524,313],{"class":273},[267,526,527],{"class":303},"SM ",[267,529,438],{"class":273},[267,531,331],{"class":303},[267,533,334],{"class":273},[267,535,536],{"class":269,"line":344},[267,537,341],{"emptyLinePlaceholder":340},[267,539,540],{"class":269,"line":371},[267,541,542],{"class":478},"// Second call — updates the constants without remounting\n",[267,544,545,547,549,551,553,555,557,559,561,563,565,567,569,572,574,576,578,580,582,584,587,589,591],{"class":269,"line":398},[267,546,484],{"class":354},[267,548,358],{"class":303},[267,550,313],{"class":273},[267,552,363],{"class":316},[267,554,320],{"class":303},[267,556,495],{"class":273},[267,558,498],{"class":277},[267,560,255],{"class":273},[267,562,379],{"class":273},[267,564,382],{"class":277},[267,566,255],{"class":273},[267,568,387],{"class":273},[267,570,571],{"class":326},"/other.mp4",[267,573,323],{"class":273},[267,575,515],{"class":273},[267,577,518],{"class":277},[267,579,255],{"class":273},[267,581,406],{"class":303},[267,583,313],{"class":273},[267,585,586],{"class":303},"LG ",[267,588,438],{"class":273},[267,590,331],{"class":303},[267,592,334],{"class":273},[244,594,595],{},"For partial updates, use the instance directly:",[257,597,599],{"className":289,"code":598,"language":292,"meta":263,"style":263},"const instance = await el.mount({ video: { src: '/video.mp4' } });\n\ninstance.config.mergeConfig({ size: ComponentSize.LG });\n",[248,600,601,646,650],{"__ignoreMap":263},[267,602,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,640,642,644],{"class":269,"line":270},[267,604,300],{"class":299},[267,606,349],{"class":303},[267,608,307],{"class":273},[267,610,355],{"class":354},[267,612,358],{"class":303},[267,614,313],{"class":273},[267,616,363],{"class":316},[267,618,320],{"class":303},[267,620,495],{"class":273},[267,622,498],{"class":277},[267,624,255],{"class":273},[267,626,379],{"class":273},[267,628,382],{"class":277},[267,630,255],{"class":273},[267,632,387],{"class":273},[267,634,390],{"class":326},[267,636,323],{"class":273},[267,638,639],{"class":273}," }",[267,641,639],{"class":273},[267,643,331],{"class":303},[267,645,334],{"class":273},[267,647,648],{"class":269,"line":337},[267,649,341],{"emptyLinePlaceholder":340},[267,651,652,655,657,660,662,665,667,669,671,673,675,677,679,681,683],{"class":269,"line":344},[267,653,654],{"class":303},"instance",[267,656,313],{"class":273},[267,658,659],{"class":303},"config",[267,661,313],{"class":273},[267,663,664],{"class":316},"mergeConfig",[267,666,320],{"class":303},[267,668,495],{"class":273},[267,670,518],{"class":277},[267,672,255],{"class":273},[267,674,406],{"class":303},[267,676,313],{"class":273},[267,678,586],{"class":303},[267,680,438],{"class":273},[267,682,331],{"class":303},[267,684,334],{"class":273},[455,686,688],{"id":687},"instance-access","Instance access",[244,690,691,692,694,695,698],{},"The element exposes ",[248,693,654],{}," and ",[248,696,697],{},"scena"," properties:",[257,700,702],{"className":289,"code":701,"language":292,"meta":263,"style":263},"el.instance;\nel.scena;\n",[248,703,704,715],{"__ignoreMap":263},[267,705,706,709,711,713],{"class":269,"line":270},[267,707,708],{"class":303},"el",[267,710,313],{"class":273},[267,712,654],{"class":303},[267,714,334],{"class":273},[267,716,717,719,721,723],{"class":269,"line":337},[267,718,708],{"class":303},[267,720,313],{"class":273},[267,722,697],{"class":303},[267,724,334],{"class":273},[244,726,727,728,731,732,734],{},"Both are ",[248,729,730],{},"null"," before ",[248,733,250],{}," is called.",[455,736,738],{"id":737},"unmounting","Unmounting",[257,740,742],{"className":289,"code":741,"language":292,"meta":263,"style":263},"await el.unmount();\n",[248,743,744],{"__ignoreMap":263},[267,745,746,748,750,752,755,758],{"class":269,"line":270},[267,747,484],{"class":354},[267,749,358],{"class":303},[267,751,313],{"class":273},[267,753,754],{"class":316},"unmount",[267,756,757],{"class":303},"()",[267,759,334],{"class":273},[244,761,762,763,694,765,767,768,770],{},"Removes the widget from the element and resets ",[248,764,654],{},[248,766,697],{}," to ",[248,769,730],{},". Also fires automatically when the element is removed from the DOM.",[455,772,774],{"id":773},"programmatic-creation","Programmatic creation",[257,776,778],{"className":289,"code":777,"language":292,"meta":263,"style":263},"const el = document.createElement('scena-video-widget');\n\ndocument.body.appendChild(el);\n\nconst instance = await el.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n});\n",[248,779,780,807,811,831,835,855,875,889],{"__ignoreMap":263},[267,781,782,784,786,788,790,792,795,797,799,801,803,805],{"class":269,"line":270},[267,783,300],{"class":299},[267,785,304],{"class":303},[267,787,307],{"class":273},[267,789,310],{"class":303},[267,791,313],{"class":273},[267,793,794],{"class":316},"createElement",[267,796,320],{"class":303},[267,798,323],{"class":273},[267,800,278],{"class":326},[267,802,323],{"class":273},[267,804,331],{"class":303},[267,806,334],{"class":273},[267,808,809],{"class":269,"line":337},[267,810,341],{"emptyLinePlaceholder":340},[267,812,813,816,818,821,823,826,829],{"class":269,"line":344},[267,814,815],{"class":303},"document",[267,817,313],{"class":273},[267,819,820],{"class":303},"body",[267,822,313],{"class":273},[267,824,825],{"class":316},"appendChild",[267,827,828],{"class":303},"(el)",[267,830,334],{"class":273},[267,832,833],{"class":269,"line":371},[267,834,341],{"emptyLinePlaceholder":340},[267,836,837,839,841,843,845,847,849,851,853],{"class":269,"line":398},[267,838,300],{"class":299},[267,840,349],{"class":303},[267,842,307],{"class":273},[267,844,355],{"class":354},[267,846,358],{"class":303},[267,848,313],{"class":273},[267,850,363],{"class":316},[267,852,320],{"class":303},[267,854,368],{"class":273},[267,856,857,859,861,863,865,867,869,871,873],{"class":269,"line":417},[267,858,374],{"class":277},[267,860,255],{"class":273},[267,862,379],{"class":273},[267,864,382],{"class":277},[267,866,255],{"class":273},[267,868,387],{"class":273},[267,870,390],{"class":326},[267,872,323],{"class":273},[267,874,395],{"class":273},[267,876,877,879,881,883,885,887],{"class":269,"line":435},[267,878,401],{"class":277},[267,880,255],{"class":273},[267,882,406],{"class":303},[267,884,313],{"class":273},[267,886,411],{"class":303},[267,888,414],{"class":273},[267,890,892,894,896],{"class":269,"line":891},8,[267,893,438],{"class":273},[267,895,331],{"class":303},[267,897,334],{"class":273},[899,900,901],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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":263,"searchDepth":270,"depth":337,"links":903},[904,905,906,907],{"id":457,"depth":337,"text":458},{"id":687,"depth":337,"text":688},{"id":737,"depth":337,"text":738},{"id":773,"depth":337,"text":774},"Use scena-video-widget in HTML — mount via DOM element, pass constants, and manage instances.","md",null,{},{"title":169,"description":908},"J9Ak0SHZCI8GEYqWeuUGhUd75dJG003ViHEsReFTPn4",[915,917],{"title":165,"path":166,"stem":167,"description":916,"children":-1},"Register the custom element with defineScenaElement() and connect styles.",{"title":173,"path":174,"stem":175,"description":918,"children":-1},"Listen to scena:mount and scena:unmount events on the custom element via addEventListener.",1777984323846]