[{"data":1,"prerenderedAt":1762},["ShallowReactive",2],{"navigation":3,"/custom-element/integration":238,"/custom-element/integration-surround":1757},[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":177,"body":240,"description":1752,"extension":1697,"links":1753,"meta":1754,"navigation":308,"path":178,"seo":1755,"stem":179,"__hash__":1756},"docs/07.custom-element/4.integration.md",{"type":241,"value":242,"toc":1746},"minimark",[243,252,257,341,661,676,680,735,1011,1095,1099,1180,1483,1487,1742],[244,245,246,247,251],"p",{},"Custom elements work in any framework. Register once at the app entry point, then use ",[248,249,250],"code",{},"\u003Cscena-video-widget>"," in templates.",[253,254,256],"h2",{"id":255},"vue","Vue",[258,259,265],"pre",{"className":260,"code":261,"filename":262,"language":263,"meta":264,"style":264},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineScenaElement } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\ndefineScenaElement();\n","main.ts","ts","",[248,266,267,303,310,324,329],{"__ignoreMap":264},[268,269,272,276,280,284,287,290,293,297,300],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"s7zQu","import",[268,277,279],{"class":278},"sMK4o"," {",[268,281,283],{"class":282},"sTEyZ"," defineScenaElement",[268,285,286],{"class":278}," }",[268,288,289],{"class":274}," from",[268,291,292],{"class":278}," '",[268,294,296],{"class":295},"sfazB","@retoo/scena",[268,298,299],{"class":278},"'",[268,301,302],{"class":278},";\n",[268,304,306],{"class":270,"line":305},2,[268,307,309],{"emptyLinePlaceholder":308},true,"\n",[268,311,313,315,317,320,322],{"class":270,"line":312},3,[268,314,275],{"class":274},[268,316,292],{"class":278},[268,318,319],{"class":295},"@retoo/scena/styles",[268,321,299],{"class":278},[268,323,302],{"class":278},[268,325,327],{"class":270,"line":326},4,[268,328,309],{"emptyLinePlaceholder":308},[268,330,332,336,339],{"class":270,"line":331},5,[268,333,335],{"class":334},"s2Zo4","defineScenaElement",[268,337,338],{"class":282},"()",[268,340,302],{"class":278},[258,342,346],{"className":343,"code":344,"filename":345,"language":255,"meta":264,"style":264},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ComponentSize, ComponentShape } from '@retoo/scena';\nimport { ref, onMounted } from 'vue';\n\nconst widgetRef = ref\u003CHTMLElement | null>(null);\n\nonMounted(async () => {\n  await widgetRef.value?.mount({\n    video: { src: '/video.mp4' },\n    size: ComponentSize.MD,\n    shape: ComponentShape.CIRCLE,\n  });\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cscena-video-widget ref=\"widgetRef\" />\n\u003C/template>\n","ScenaWidget.vue",[248,347,348,377,404,430,434,472,477,497,523,549,567,584,594,604,614,619,629,652],{"__ignoreMap":264},[268,349,350,353,357,361,364,367,370,372,374],{"class":270,"line":271},[268,351,352],{"class":278},"\u003C",[268,354,356],{"class":355},"swJcz","script",[268,358,360],{"class":359},"spNyl"," setup",[268,362,363],{"class":359}," lang",[268,365,366],{"class":278},"=",[268,368,369],{"class":278},"\"",[268,371,263],{"class":295},[268,373,369],{"class":278},[268,375,376],{"class":278},">\n",[268,378,379,381,383,386,389,392,394,396,398,400,402],{"class":270,"line":305},[268,380,275],{"class":274},[268,382,279],{"class":278},[268,384,385],{"class":282}," ComponentSize",[268,387,388],{"class":278},",",[268,390,391],{"class":282}," ComponentShape",[268,393,286],{"class":278},[268,395,289],{"class":274},[268,397,292],{"class":278},[268,399,296],{"class":295},[268,401,299],{"class":278},[268,403,302],{"class":278},[268,405,406,408,410,413,415,418,420,422,424,426,428],{"class":270,"line":312},[268,407,275],{"class":274},[268,409,279],{"class":278},[268,411,412],{"class":282}," ref",[268,414,388],{"class":278},[268,416,417],{"class":282}," onMounted",[268,419,286],{"class":278},[268,421,289],{"class":274},[268,423,292],{"class":278},[268,425,255],{"class":295},[268,427,299],{"class":278},[268,429,302],{"class":278},[268,431,432],{"class":270,"line":326},[268,433,309],{"emptyLinePlaceholder":308},[268,435,436,439,442,444,446,448,452,455,458,461,464,467,470],{"class":270,"line":331},[268,437,438],{"class":359},"const",[268,440,441],{"class":282}," widgetRef ",[268,443,366],{"class":278},[268,445,412],{"class":334},[268,447,352],{"class":278},[268,449,451],{"class":450},"sBMFI","HTMLElement",[268,453,454],{"class":278}," |",[268,456,457],{"class":450}," null",[268,459,460],{"class":278},">",[268,462,463],{"class":282},"(",[268,465,466],{"class":278},"null",[268,468,469],{"class":282},")",[268,471,302],{"class":278},[268,473,475],{"class":270,"line":474},6,[268,476,309],{"emptyLinePlaceholder":308},[268,478,480,483,485,488,491,494],{"class":270,"line":479},7,[268,481,482],{"class":334},"onMounted",[268,484,463],{"class":282},[268,486,487],{"class":359},"async",[268,489,490],{"class":278}," ()",[268,492,493],{"class":359}," =>",[268,495,496],{"class":278}," {\n",[268,498,500,503,506,509,512,515,518,520],{"class":270,"line":499},8,[268,501,502],{"class":274},"  await",[268,504,505],{"class":282}," widgetRef",[268,507,508],{"class":278},".",[268,510,511],{"class":282},"value",[268,513,514],{"class":278},"?.",[268,516,517],{"class":334},"mount",[268,519,463],{"class":355},[268,521,522],{"class":278},"{\n",[268,524,526,529,532,534,537,539,541,544,546],{"class":270,"line":525},9,[268,527,528],{"class":355},"    video",[268,530,531],{"class":278},":",[268,533,279],{"class":278},[268,535,536],{"class":355}," src",[268,538,531],{"class":278},[268,540,292],{"class":278},[268,542,543],{"class":295},"/video.mp4",[268,545,299],{"class":278},[268,547,548],{"class":278}," },\n",[268,550,552,555,557,559,561,564],{"class":270,"line":551},10,[268,553,554],{"class":355},"    size",[268,556,531],{"class":278},[268,558,385],{"class":282},[268,560,508],{"class":278},[268,562,563],{"class":282},"MD",[268,565,566],{"class":278},",\n",[268,568,570,573,575,577,579,582],{"class":270,"line":569},11,[268,571,572],{"class":355},"    shape",[268,574,531],{"class":278},[268,576,391],{"class":282},[268,578,508],{"class":278},[268,580,581],{"class":282},"CIRCLE",[268,583,566],{"class":278},[268,585,587,590,592],{"class":270,"line":586},12,[268,588,589],{"class":278},"  }",[268,591,469],{"class":355},[268,593,302],{"class":278},[268,595,597,600,602],{"class":270,"line":596},13,[268,598,599],{"class":278},"}",[268,601,469],{"class":282},[268,603,302],{"class":278},[268,605,607,610,612],{"class":270,"line":606},14,[268,608,609],{"class":278},"\u003C/",[268,611,356],{"class":355},[268,613,376],{"class":278},[268,615,617],{"class":270,"line":616},15,[268,618,309],{"emptyLinePlaceholder":308},[268,620,622,624,627],{"class":270,"line":621},16,[268,623,352],{"class":278},[268,625,626],{"class":355},"template",[268,628,376],{"class":278},[268,630,632,635,638,640,642,644,647,649],{"class":270,"line":631},17,[268,633,634],{"class":278},"  \u003C",[268,636,637],{"class":355},"scena-video-widget",[268,639,412],{"class":359},[268,641,366],{"class":278},[268,643,369],{"class":278},[268,645,646],{"class":295},"widgetRef",[268,648,369],{"class":278},[268,650,651],{"class":278}," />\n",[268,653,655,657,659],{"class":270,"line":654},18,[268,656,609],{"class":278},[268,658,626],{"class":355},[268,660,376],{"class":278},[662,663,666],"callout",{"color":664,"icon":665},"info","i-lucide-info",[244,667,668,669,671,672,675],{},"Vue recognizes custom elements with hyphens in the tag name automatically. If you get a component resolution warning, add ",[248,670,637],{}," to ",[248,673,674],{},"compilerOptions.isCustomElement"," in your Vue config.",[253,677,679],{"id":678},"react","React",[258,681,685],{"className":682,"code":261,"filename":683,"language":684,"meta":264,"style":264},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","main.tsx","tsx",[248,686,687,707,711,723,727],{"__ignoreMap":264},[268,688,689,691,693,695,697,699,701,703,705],{"class":270,"line":271},[268,690,275],{"class":274},[268,692,279],{"class":278},[268,694,283],{"class":282},[268,696,286],{"class":278},[268,698,289],{"class":274},[268,700,292],{"class":278},[268,702,296],{"class":295},[268,704,299],{"class":278},[268,706,302],{"class":278},[268,708,709],{"class":270,"line":305},[268,710,309],{"emptyLinePlaceholder":308},[268,712,713,715,717,719,721],{"class":270,"line":312},[268,714,275],{"class":274},[268,716,292],{"class":278},[268,718,319],{"class":295},[268,720,299],{"class":278},[268,722,302],{"class":278},[268,724,725],{"class":270,"line":326},[268,726,309],{"emptyLinePlaceholder":308},[268,728,729,731,733],{"class":270,"line":331},[268,730,335],{"class":334},[268,732,338],{"class":282},[268,734,302],{"class":278},[258,736,739],{"className":682,"code":737,"filename":738,"language":684,"meta":264,"style":264},"import { ComponentSize, ComponentShape } from '@retoo/scena';\nimport { useRef, useEffect } from 'react';\n\nexport function ScenaWidget() {\n  const ref = useRef\u003CHTMLElement>(null);\n\n  useEffect(() => {\n    ref.current?.mount({\n      video: { src: '/video.mp4' },\n      size: ComponentSize.MD,\n      shape: ComponentShape.CIRCLE,\n    });\n\n    return () => {\n      ref.current?.unmount();\n    };\n  }, []);\n\n  return \u003Cscena-video-widget ref={ref} />;\n}\n","ScenaWidget.tsx",[248,740,741,765,791,795,810,836,840,853,871,892,907,922,931,935,946,964,969,979,983,1005],{"__ignoreMap":264},[268,742,743,745,747,749,751,753,755,757,759,761,763],{"class":270,"line":271},[268,744,275],{"class":274},[268,746,279],{"class":278},[268,748,385],{"class":282},[268,750,388],{"class":278},[268,752,391],{"class":282},[268,754,286],{"class":278},[268,756,289],{"class":274},[268,758,292],{"class":278},[268,760,296],{"class":295},[268,762,299],{"class":278},[268,764,302],{"class":278},[268,766,767,769,771,774,776,779,781,783,785,787,789],{"class":270,"line":305},[268,768,275],{"class":274},[268,770,279],{"class":278},[268,772,773],{"class":282}," useRef",[268,775,388],{"class":278},[268,777,778],{"class":282}," useEffect",[268,780,286],{"class":278},[268,782,289],{"class":274},[268,784,292],{"class":278},[268,786,678],{"class":295},[268,788,299],{"class":278},[268,790,302],{"class":278},[268,792,793],{"class":270,"line":312},[268,794,309],{"emptyLinePlaceholder":308},[268,796,797,800,803,806,808],{"class":270,"line":326},[268,798,799],{"class":274},"export",[268,801,802],{"class":359}," function",[268,804,805],{"class":334}," ScenaWidget",[268,807,338],{"class":278},[268,809,496],{"class":278},[268,811,812,815,817,820,822,824,826,828,830,832,834],{"class":270,"line":331},[268,813,814],{"class":359},"  const",[268,816,412],{"class":282},[268,818,819],{"class":278}," =",[268,821,773],{"class":334},[268,823,352],{"class":278},[268,825,451],{"class":450},[268,827,460],{"class":278},[268,829,463],{"class":355},[268,831,466],{"class":278},[268,833,469],{"class":355},[268,835,302],{"class":278},[268,837,838],{"class":270,"line":474},[268,839,309],{"emptyLinePlaceholder":308},[268,841,842,845,847,849,851],{"class":270,"line":479},[268,843,844],{"class":334},"  useEffect",[268,846,463],{"class":355},[268,848,338],{"class":278},[268,850,493],{"class":359},[268,852,496],{"class":278},[268,854,855,858,860,863,865,867,869],{"class":270,"line":499},[268,856,857],{"class":282},"    ref",[268,859,508],{"class":278},[268,861,862],{"class":282},"current",[268,864,514],{"class":278},[268,866,517],{"class":334},[268,868,463],{"class":355},[268,870,522],{"class":278},[268,872,873,876,878,880,882,884,886,888,890],{"class":270,"line":525},[268,874,875],{"class":355},"      video",[268,877,531],{"class":278},[268,879,279],{"class":278},[268,881,536],{"class":355},[268,883,531],{"class":278},[268,885,292],{"class":278},[268,887,543],{"class":295},[268,889,299],{"class":278},[268,891,548],{"class":278},[268,893,894,897,899,901,903,905],{"class":270,"line":551},[268,895,896],{"class":355},"      size",[268,898,531],{"class":278},[268,900,385],{"class":282},[268,902,508],{"class":278},[268,904,563],{"class":282},[268,906,566],{"class":278},[268,908,909,912,914,916,918,920],{"class":270,"line":569},[268,910,911],{"class":355},"      shape",[268,913,531],{"class":278},[268,915,391],{"class":282},[268,917,508],{"class":278},[268,919,581],{"class":282},[268,921,566],{"class":278},[268,923,924,927,929],{"class":270,"line":586},[268,925,926],{"class":278},"    }",[268,928,469],{"class":355},[268,930,302],{"class":278},[268,932,933],{"class":270,"line":596},[268,934,309],{"emptyLinePlaceholder":308},[268,936,937,940,942,944],{"class":270,"line":606},[268,938,939],{"class":274},"    return",[268,941,490],{"class":278},[268,943,493],{"class":359},[268,945,496],{"class":278},[268,947,948,951,953,955,957,960,962],{"class":270,"line":616},[268,949,950],{"class":282},"      ref",[268,952,508],{"class":278},[268,954,862],{"class":282},[268,956,514],{"class":278},[268,958,959],{"class":334},"unmount",[268,961,338],{"class":355},[268,963,302],{"class":278},[268,965,966],{"class":270,"line":621},[268,967,968],{"class":278},"    };\n",[268,970,971,974,977],{"class":270,"line":631},[268,972,973],{"class":278},"  },",[268,975,976],{"class":355}," [])",[268,978,302],{"class":278},[268,980,981],{"class":270,"line":654},[268,982,309],{"emptyLinePlaceholder":308},[268,984,986,989,992,994,996,999,1002],{"class":270,"line":985},19,[268,987,988],{"class":274},"  return",[268,990,991],{"class":278}," \u003C",[268,993,637],{"class":450},[268,995,412],{"class":359},[268,997,998],{"class":278},"={",[268,1000,1001],{"class":282},"ref",[268,1003,1004],{"class":278},"} />;\n",[268,1006,1008],{"class":270,"line":1007},20,[268,1009,1010],{"class":278},"}\n",[662,1012,1013,1016],{"color":664,"icon":665},[244,1014,1015],{},"TypeScript may not know about the custom element tag. Add a JSX declaration to suppress type errors:",[258,1017,1020],{"className":260,"code":1018,"filename":1019,"language":263,"meta":264,"style":264},"declare namespace JSX {\n  interface IntrinsicElements {\n    'scena-video-widget': React.DetailedHTMLProps\u003CReact.HTMLAttributes\u003CHTMLElement>, HTMLElement>;\n  }\n}\n","scena.d.ts",[248,1021,1022,1035,1045,1086,1091],{"__ignoreMap":264},[268,1023,1024,1027,1030,1033],{"class":270,"line":271},[268,1025,1026],{"class":359},"declare",[268,1028,1029],{"class":359}," namespace",[268,1031,1032],{"class":450}," JSX",[268,1034,496],{"class":278},[268,1036,1037,1040,1043],{"class":270,"line":305},[268,1038,1039],{"class":359},"  interface",[268,1041,1042],{"class":450}," IntrinsicElements",[268,1044,496],{"class":278},[268,1046,1047,1050,1052,1054,1056,1059,1061,1064,1066,1068,1070,1073,1075,1077,1080,1083],{"class":270,"line":312},[268,1048,1049],{"class":278},"    '",[268,1051,637],{"class":295},[268,1053,299],{"class":278},[268,1055,531],{"class":278},[268,1057,1058],{"class":450}," React",[268,1060,508],{"class":278},[268,1062,1063],{"class":450},"DetailedHTMLProps",[268,1065,352],{"class":278},[268,1067,679],{"class":450},[268,1069,508],{"class":278},[268,1071,1072],{"class":450},"HTMLAttributes",[268,1074,352],{"class":278},[268,1076,451],{"class":450},[268,1078,1079],{"class":278},">,",[268,1081,1082],{"class":450}," HTMLElement",[268,1084,1085],{"class":278},">;\n",[268,1087,1088],{"class":270,"line":326},[268,1089,1090],{"class":278},"  }\n",[268,1092,1093],{"class":270,"line":331},[268,1094,1010],{"class":278},[253,1096,1098],{"id":1097},"angular","Angular",[258,1100,1103],{"className":260,"code":1101,"filename":1102,"language":263,"meta":264,"style":264},"import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n","app.module.ts",[248,1104,1105,1132,1136,1148,1160,1167],{"__ignoreMap":264},[268,1106,1107,1109,1111,1114,1116,1119,1121,1123,1125,1128,1130],{"class":270,"line":271},[268,1108,275],{"class":274},[268,1110,279],{"class":278},[268,1112,1113],{"class":282}," CUSTOM_ELEMENTS_SCHEMA",[268,1115,388],{"class":278},[268,1117,1118],{"class":282}," NgModule",[268,1120,286],{"class":278},[268,1122,289],{"class":274},[268,1124,292],{"class":278},[268,1126,1127],{"class":295},"@angular/core",[268,1129,299],{"class":278},[268,1131,302],{"class":278},[268,1133,1134],{"class":270,"line":305},[268,1135,309],{"emptyLinePlaceholder":308},[268,1137,1138,1141,1144,1146],{"class":270,"line":312},[268,1139,1140],{"class":278},"@",[268,1142,1143],{"class":334},"NgModule",[268,1145,463],{"class":282},[268,1147,522],{"class":278},[268,1149,1150,1153,1155,1158],{"class":270,"line":326},[268,1151,1152],{"class":355},"  schemas",[268,1154,531],{"class":278},[268,1156,1157],{"class":282}," [CUSTOM_ELEMENTS_SCHEMA]",[268,1159,566],{"class":278},[268,1161,1162,1164],{"class":270,"line":331},[268,1163,599],{"class":278},[268,1165,1166],{"class":282},")\n",[268,1168,1169,1171,1174,1177],{"class":270,"line":474},[268,1170,799],{"class":274},[268,1172,1173],{"class":359}," class",[268,1175,1176],{"class":450}," AppModule",[268,1178,1179],{"class":278}," {}\n",[258,1181,1184],{"className":260,"code":1182,"filename":1183,"language":263,"meta":264,"style":264},"import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';\nimport { defineScenaElement, ComponentSize, ComponentShape } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\ndefineScenaElement();\n\n@Component({\n  selector: 'app-root',\n  template: `\u003Cscena-video-widget #widget>\u003C/scena-video-widget>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('widget') widgetRef!: ElementRef;\n\n  async ngAfterViewInit() {\n    await this.widgetRef.nativeElement.mount({\n      video: { src: '/video.mp4' },\n      size: ComponentSize.MD,\n      shape: ComponentShape.CIRCLE,\n    });\n  }\n}\n","app.component.ts",[248,1185,1186,1222,1250,1254,1266,1270,1278,1282,1293,1309,1327,1333,1349,1378,1382,1394,1417,1437,1451,1465,1473,1478],{"__ignoreMap":264},[268,1187,1188,1190,1192,1195,1197,1200,1202,1205,1207,1210,1212,1214,1216,1218,1220],{"class":270,"line":271},[268,1189,275],{"class":274},[268,1191,279],{"class":278},[268,1193,1194],{"class":282}," Component",[268,1196,388],{"class":278},[268,1198,1199],{"class":282}," ElementRef",[268,1201,388],{"class":278},[268,1203,1204],{"class":282}," ViewChild",[268,1206,388],{"class":278},[268,1208,1209],{"class":282}," AfterViewInit",[268,1211,286],{"class":278},[268,1213,289],{"class":274},[268,1215,292],{"class":278},[268,1217,1127],{"class":295},[268,1219,299],{"class":278},[268,1221,302],{"class":278},[268,1223,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":270,"line":305},[268,1225,275],{"class":274},[268,1227,279],{"class":278},[268,1229,283],{"class":282},[268,1231,388],{"class":278},[268,1233,385],{"class":282},[268,1235,388],{"class":278},[268,1237,391],{"class":282},[268,1239,286],{"class":278},[268,1241,289],{"class":274},[268,1243,292],{"class":278},[268,1245,296],{"class":295},[268,1247,299],{"class":278},[268,1249,302],{"class":278},[268,1251,1252],{"class":270,"line":312},[268,1253,309],{"emptyLinePlaceholder":308},[268,1255,1256,1258,1260,1262,1264],{"class":270,"line":326},[268,1257,275],{"class":274},[268,1259,292],{"class":278},[268,1261,319],{"class":295},[268,1263,299],{"class":278},[268,1265,302],{"class":278},[268,1267,1268],{"class":270,"line":331},[268,1269,309],{"emptyLinePlaceholder":308},[268,1271,1272,1274,1276],{"class":270,"line":474},[268,1273,335],{"class":334},[268,1275,338],{"class":282},[268,1277,302],{"class":278},[268,1279,1280],{"class":270,"line":479},[268,1281,309],{"emptyLinePlaceholder":308},[268,1283,1284,1286,1289,1291],{"class":270,"line":499},[268,1285,1140],{"class":278},[268,1287,1288],{"class":334},"Component",[268,1290,463],{"class":282},[268,1292,522],{"class":278},[268,1294,1295,1298,1300,1302,1305,1307],{"class":270,"line":525},[268,1296,1297],{"class":355},"  selector",[268,1299,531],{"class":278},[268,1301,292],{"class":278},[268,1303,1304],{"class":295},"app-root",[268,1306,299],{"class":278},[268,1308,566],{"class":278},[268,1310,1311,1314,1316,1319,1322,1325],{"class":270,"line":551},[268,1312,1313],{"class":355},"  template",[268,1315,531],{"class":278},[268,1317,1318],{"class":278}," `",[268,1320,1321],{"class":295},"\u003Cscena-video-widget #widget>\u003C/scena-video-widget>",[268,1323,1324],{"class":278},"`",[268,1326,566],{"class":278},[268,1328,1329,1331],{"class":270,"line":569},[268,1330,599],{"class":278},[268,1332,1166],{"class":282},[268,1334,1335,1337,1339,1342,1345,1347],{"class":270,"line":586},[268,1336,799],{"class":274},[268,1338,1173],{"class":359},[268,1340,1341],{"class":450}," AppComponent",[268,1343,1344],{"class":359}," implements",[268,1346,1209],{"class":450},[268,1348,496],{"class":278},[268,1350,1351,1354,1357,1359,1361,1364,1366,1369,1371,1374,1376],{"class":270,"line":596},[268,1352,1353],{"class":278},"  @",[268,1355,1356],{"class":334},"ViewChild",[268,1358,463],{"class":282},[268,1360,299],{"class":278},[268,1362,1363],{"class":295},"widget",[268,1365,299],{"class":278},[268,1367,1368],{"class":282},") ",[268,1370,646],{"class":355},[268,1372,1373],{"class":278},"!:",[268,1375,1199],{"class":450},[268,1377,302],{"class":278},[268,1379,1380],{"class":270,"line":606},[268,1381,309],{"emptyLinePlaceholder":308},[268,1383,1384,1387,1390,1392],{"class":270,"line":616},[268,1385,1386],{"class":359},"  async",[268,1388,1389],{"class":355}," ngAfterViewInit",[268,1391,338],{"class":278},[268,1393,496],{"class":278},[268,1395,1396,1399,1402,1404,1406,1409,1411,1413,1415],{"class":270,"line":621},[268,1397,1398],{"class":274},"    await",[268,1400,1401],{"class":278}," this.",[268,1403,646],{"class":282},[268,1405,508],{"class":278},[268,1407,1408],{"class":282},"nativeElement",[268,1410,508],{"class":278},[268,1412,517],{"class":334},[268,1414,463],{"class":355},[268,1416,522],{"class":278},[268,1418,1419,1421,1423,1425,1427,1429,1431,1433,1435],{"class":270,"line":631},[268,1420,875],{"class":355},[268,1422,531],{"class":278},[268,1424,279],{"class":278},[268,1426,536],{"class":355},[268,1428,531],{"class":278},[268,1430,292],{"class":278},[268,1432,543],{"class":295},[268,1434,299],{"class":278},[268,1436,548],{"class":278},[268,1438,1439,1441,1443,1445,1447,1449],{"class":270,"line":654},[268,1440,896],{"class":355},[268,1442,531],{"class":278},[268,1444,385],{"class":282},[268,1446,508],{"class":278},[268,1448,563],{"class":282},[268,1450,566],{"class":278},[268,1452,1453,1455,1457,1459,1461,1463],{"class":270,"line":985},[268,1454,911],{"class":355},[268,1456,531],{"class":278},[268,1458,391],{"class":282},[268,1460,508],{"class":278},[268,1462,581],{"class":282},[268,1464,566],{"class":278},[268,1466,1467,1469,1471],{"class":270,"line":1007},[268,1468,926],{"class":278},[268,1470,469],{"class":355},[268,1472,302],{"class":278},[268,1474,1476],{"class":270,"line":1475},21,[268,1477,1090],{"class":278},[268,1479,1481],{"class":270,"line":1480},22,[268,1482,1010],{"class":278},[253,1484,1486],{"id":1485},"vanilla-js","Vanilla JS",[258,1488,1493],{"className":1489,"code":1490,"filename":1491,"language":1492,"meta":264,"style":264},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Chead>\n  \u003Clink rel=\"stylesheet\" href=\"https://unpkg.com/@retoo/scena/dist/scena.css\" />\n\u003C/head>\n\u003Cbody>\n  \u003Cscena-video-widget>\u003C/scena-video-widget>\n\n  \u003Cscript src=\"https://unpkg.com/@retoo/scena/dist/scena.umd.js\">\u003C/script>\n  \u003Cscript>\n    window.defineScenaElement();\n\n    const el = document.querySelector('scena-video-widget');\n    \n    el.mount({\n      video: { src: '/video.mp4' },\n      size: 'md',\n      shape: 'circle',\n    });\n  \u003C/script>\n\u003C/body>\n","index.html","html",[248,1494,1495,1504,1537,1545,1554,1567,1571,1594,1602,1615,1619,1649,1654,1667,1687,1702,1717,1725,1734],{"__ignoreMap":264},[268,1496,1497,1499,1502],{"class":270,"line":271},[268,1498,352],{"class":278},[268,1500,1501],{"class":355},"head",[268,1503,376],{"class":278},[268,1505,1506,1508,1511,1514,1516,1518,1521,1523,1526,1528,1530,1533,1535],{"class":270,"line":305},[268,1507,634],{"class":278},[268,1509,1510],{"class":355},"link",[268,1512,1513],{"class":359}," rel",[268,1515,366],{"class":278},[268,1517,369],{"class":278},[268,1519,1520],{"class":295},"stylesheet",[268,1522,369],{"class":278},[268,1524,1525],{"class":359}," href",[268,1527,366],{"class":278},[268,1529,369],{"class":278},[268,1531,1532],{"class":295},"https://unpkg.com/@retoo/scena/dist/scena.css",[268,1534,369],{"class":278},[268,1536,651],{"class":278},[268,1538,1539,1541,1543],{"class":270,"line":312},[268,1540,609],{"class":278},[268,1542,1501],{"class":355},[268,1544,376],{"class":278},[268,1546,1547,1549,1552],{"class":270,"line":326},[268,1548,352],{"class":278},[268,1550,1551],{"class":355},"body",[268,1553,376],{"class":278},[268,1555,1556,1558,1560,1563,1565],{"class":270,"line":331},[268,1557,634],{"class":278},[268,1559,637],{"class":355},[268,1561,1562],{"class":278},">\u003C/",[268,1564,637],{"class":355},[268,1566,376],{"class":278},[268,1568,1569],{"class":270,"line":474},[268,1570,309],{"emptyLinePlaceholder":308},[268,1572,1573,1575,1577,1579,1581,1583,1586,1588,1590,1592],{"class":270,"line":479},[268,1574,634],{"class":278},[268,1576,356],{"class":355},[268,1578,536],{"class":359},[268,1580,366],{"class":278},[268,1582,369],{"class":278},[268,1584,1585],{"class":295},"https://unpkg.com/@retoo/scena/dist/scena.umd.js",[268,1587,369],{"class":278},[268,1589,1562],{"class":278},[268,1591,356],{"class":355},[268,1593,376],{"class":278},[268,1595,1596,1598,1600],{"class":270,"line":499},[268,1597,634],{"class":278},[268,1599,356],{"class":355},[268,1601,376],{"class":278},[268,1603,1604,1607,1609,1611,1613],{"class":270,"line":525},[268,1605,1606],{"class":282},"    window",[268,1608,508],{"class":278},[268,1610,335],{"class":334},[268,1612,338],{"class":282},[268,1614,302],{"class":278},[268,1616,1617],{"class":270,"line":551},[268,1618,309],{"emptyLinePlaceholder":308},[268,1620,1621,1624,1627,1629,1632,1634,1637,1639,1641,1643,1645,1647],{"class":270,"line":569},[268,1622,1623],{"class":359},"    const",[268,1625,1626],{"class":282}," el ",[268,1628,366],{"class":278},[268,1630,1631],{"class":282}," document",[268,1633,508],{"class":278},[268,1635,1636],{"class":334},"querySelector",[268,1638,463],{"class":282},[268,1640,299],{"class":278},[268,1642,637],{"class":295},[268,1644,299],{"class":278},[268,1646,469],{"class":282},[268,1648,302],{"class":278},[268,1650,1651],{"class":270,"line":586},[268,1652,1653],{"class":282},"    \n",[268,1655,1656,1659,1661,1663,1665],{"class":270,"line":596},[268,1657,1658],{"class":282},"    el",[268,1660,508],{"class":278},[268,1662,517],{"class":334},[268,1664,463],{"class":282},[268,1666,522],{"class":278},[268,1668,1669,1671,1673,1675,1677,1679,1681,1683,1685],{"class":270,"line":606},[268,1670,875],{"class":355},[268,1672,531],{"class":278},[268,1674,279],{"class":278},[268,1676,536],{"class":355},[268,1678,531],{"class":278},[268,1680,292],{"class":278},[268,1682,543],{"class":295},[268,1684,299],{"class":278},[268,1686,548],{"class":278},[268,1688,1689,1691,1693,1695,1698,1700],{"class":270,"line":616},[268,1690,896],{"class":355},[268,1692,531],{"class":278},[268,1694,292],{"class":278},[268,1696,1697],{"class":295},"md",[268,1699,299],{"class":278},[268,1701,566],{"class":278},[268,1703,1704,1706,1708,1710,1713,1715],{"class":270,"line":621},[268,1705,911],{"class":355},[268,1707,531],{"class":278},[268,1709,292],{"class":278},[268,1711,1712],{"class":295},"circle",[268,1714,299],{"class":278},[268,1716,566],{"class":278},[268,1718,1719,1721,1723],{"class":270,"line":631},[268,1720,926],{"class":278},[268,1722,469],{"class":282},[268,1724,302],{"class":278},[268,1726,1727,1730,1732],{"class":270,"line":654},[268,1728,1729],{"class":278},"  \u003C/",[268,1731,356],{"class":355},[268,1733,376],{"class":278},[268,1735,1736,1738,1740],{"class":270,"line":985},[268,1737,609],{"class":278},[268,1739,1551],{"class":355},[268,1741,376],{"class":278},[1743,1744,1745],"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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":264,"searchDepth":271,"depth":305,"links":1747},[1748,1749,1750,1751],{"id":255,"depth":305,"text":256},{"id":678,"depth":305,"text":679},{"id":1097,"depth":305,"text":1098},{"id":1485,"depth":305,"text":1486},"Use the scena-video-widget custom element in React, Vue, Angular, and vanilla HTML.",null,{},{"title":177,"description":1752},"0Wy2NWhhd9tD4ZCU5BKLleoavJ53EVpzjvnzF5aMsnQ",[1758,1760],{"title":173,"path":174,"stem":175,"description":1759,"children":-1},"Listen to scena:mount and scena:unmount events on the custom element via addEventListener.",{"title":186,"path":187,"stem":188,"description":1761,"children":-1},"Minimal widget mounted with a single required field — video.src.",1777984324050]