[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"navigation":3,"/configuration/size":238,"/configuration/size-surround":1540},[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":32,"body":240,"description":1535,"extension":310,"links":1536,"meta":1537,"navigation":411,"path":33,"seo":1538,"stem":34,"__hash__":1539},"docs/02.configuration/2.size.md",{"type":241,"value":242,"toc":1524},"minimark",[243,260,265,343,347,355,535,538,544,668,672,678,802,805,811,935,938,944,1068,1072,1078,1202,1206,1371,1374,1378,1381,1520],[244,245,246,247,251,252,255,256,259],"p",{},"Widget dimensions are controlled by the ",[248,249,250],"code",{},"size"," property, which selects from a predefined scale ranging from ",[248,253,254],{},"xs"," to ",[248,257,258],{},"xxl",". All internal elements — video container, buttons, progress bar — scale proportionally, so you never need to adjust individual components manually.",[261,262,264],"h2",{"id":263},"available-sizes","Available sizes",[266,267,268,281],"table",{},[269,270,271],"thead",{},[272,273,274,278],"tr",{},[275,276,277],"th",{},"Value",[275,279,280],{},"Description",[282,283,284,294,304,314,324,334],"tbody",{},[272,285,286,291],{},[287,288,289],"td",{},[248,290,254],{},[287,292,293],{},"Extra small — minimal footprint",[272,295,296,301],{},[287,297,298],{},[248,299,300],{},"sm",[287,302,303],{},"Small",[272,305,306,311],{},[287,307,308],{},[248,309,310],{},"md",[287,312,313],{},"Medium (default)",[272,315,316,321],{},[287,317,318],{},[248,319,320],{},"lg",[287,322,323],{},"Large",[272,325,326,331],{},[287,327,328],{},[248,329,330],{},"xl",[287,332,333],{},"Extra large",[272,335,336,340],{},[287,337,338],{},[248,339,258],{},[287,341,342],{},"Maximum size",[261,344,346],{"id":345},"extra-small","Extra small",[348,349,351],"scena-container",{"style":350},"height: 240px",[352,353],"scena-component",{":config":354},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"xs\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,357,362],"pre",{"className":358,"code":359,"language":360,"meta":361,"style":361},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.XS,\n});\n","ts","",[248,363,364,406,413,427,432,453,458,479,506,524],{"__ignoreMap":361},[365,366,369,373,377,381,384,387,390,393,396,400,403],"span",{"class":367,"line":368},"line",1,[365,370,372],{"class":371},"s7zQu","import",[365,374,376],{"class":375},"sMK4o"," {",[365,378,380],{"class":379},"sTEyZ"," useScena",[365,382,383],{"class":375},",",[365,385,386],{"class":379}," ComponentSize",[365,388,389],{"class":375}," }",[365,391,392],{"class":371}," from",[365,394,395],{"class":375}," '",[365,397,399],{"class":398},"sfazB","@retoo/scena",[365,401,402],{"class":375},"'",[365,404,405],{"class":375},";\n",[365,407,409],{"class":367,"line":408},2,[365,410,412],{"emptyLinePlaceholder":411},true,"\n",[365,414,416,418,420,423,425],{"class":367,"line":415},3,[365,417,372],{"class":371},[365,419,395],{"class":375},[365,421,422],{"class":398},"@retoo/scena/styles",[365,424,402],{"class":375},[365,426,405],{"class":375},[365,428,430],{"class":367,"line":429},4,[365,431,412],{"emptyLinePlaceholder":411},[365,433,435,439,442,445,448,451],{"class":367,"line":434},5,[365,436,438],{"class":437},"spNyl","const",[365,440,441],{"class":379}," scena ",[365,443,444],{"class":375},"=",[365,446,380],{"class":447},"s2Zo4",[365,449,450],{"class":379},"()",[365,452,405],{"class":375},[365,454,456],{"class":367,"line":455},6,[365,457,412],{"emptyLinePlaceholder":411},[365,459,461,464,467,470,473,476],{"class":367,"line":460},7,[365,462,463],{"class":371},"await",[365,465,466],{"class":379}," scena",[365,468,469],{"class":375},".",[365,471,472],{"class":447},"mount",[365,474,475],{"class":379},"(",[365,477,478],{"class":375},"{\n",[365,480,482,486,489,491,494,496,498,501,503],{"class":367,"line":481},8,[365,483,485],{"class":484},"swJcz","  video",[365,487,488],{"class":375},":",[365,490,376],{"class":375},[365,492,493],{"class":484}," src",[365,495,488],{"class":375},[365,497,395],{"class":375},[365,499,500],{"class":398},"/video.mp4",[365,502,402],{"class":375},[365,504,505],{"class":375}," },\n",[365,507,509,512,514,516,518,521],{"class":367,"line":508},9,[365,510,511],{"class":484},"  size",[365,513,488],{"class":375},[365,515,386],{"class":379},[365,517,469],{"class":375},[365,519,520],{"class":379},"XS",[365,522,523],{"class":375},",\n",[365,525,527,530,533],{"class":367,"line":526},10,[365,528,529],{"class":375},"}",[365,531,532],{"class":379},")",[365,534,405],{"class":375},[261,536,303],{"id":537},"small",[348,539,541],{"style":540},"height: 280px",[352,542],{":config":543},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"sm\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,545,547],{"className":358,"code":546,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.SM,\n});\n",[248,548,549,573,577,589,593,607,611,625,645,660],{"__ignoreMap":361},[365,550,551,553,555,557,559,561,563,565,567,569,571],{"class":367,"line":368},[365,552,372],{"class":371},[365,554,376],{"class":375},[365,556,380],{"class":379},[365,558,383],{"class":375},[365,560,386],{"class":379},[365,562,389],{"class":375},[365,564,392],{"class":371},[365,566,395],{"class":375},[365,568,399],{"class":398},[365,570,402],{"class":375},[365,572,405],{"class":375},[365,574,575],{"class":367,"line":408},[365,576,412],{"emptyLinePlaceholder":411},[365,578,579,581,583,585,587],{"class":367,"line":415},[365,580,372],{"class":371},[365,582,395],{"class":375},[365,584,422],{"class":398},[365,586,402],{"class":375},[365,588,405],{"class":375},[365,590,591],{"class":367,"line":429},[365,592,412],{"emptyLinePlaceholder":411},[365,594,595,597,599,601,603,605],{"class":367,"line":434},[365,596,438],{"class":437},[365,598,441],{"class":379},[365,600,444],{"class":375},[365,602,380],{"class":447},[365,604,450],{"class":379},[365,606,405],{"class":375},[365,608,609],{"class":367,"line":455},[365,610,412],{"emptyLinePlaceholder":411},[365,612,613,615,617,619,621,623],{"class":367,"line":460},[365,614,463],{"class":371},[365,616,466],{"class":379},[365,618,469],{"class":375},[365,620,472],{"class":447},[365,622,475],{"class":379},[365,624,478],{"class":375},[365,626,627,629,631,633,635,637,639,641,643],{"class":367,"line":481},[365,628,485],{"class":484},[365,630,488],{"class":375},[365,632,376],{"class":375},[365,634,493],{"class":484},[365,636,488],{"class":375},[365,638,395],{"class":375},[365,640,500],{"class":398},[365,642,402],{"class":375},[365,644,505],{"class":375},[365,646,647,649,651,653,655,658],{"class":367,"line":508},[365,648,511],{"class":484},[365,650,488],{"class":375},[365,652,386],{"class":379},[365,654,469],{"class":375},[365,656,657],{"class":379},"SM",[365,659,523],{"class":375},[365,661,662,664,666],{"class":367,"line":526},[365,663,529],{"class":375},[365,665,532],{"class":379},[365,667,405],{"class":375},[261,669,671],{"id":670},"medium","Medium",[348,673,675],{"style":674},"height: 480px",[352,676],{":config":677},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,679,681],{"className":358,"code":680,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.MD,\n});\n",[248,682,683,707,711,723,727,741,745,759,779,794],{"__ignoreMap":361},[365,684,685,687,689,691,693,695,697,699,701,703,705],{"class":367,"line":368},[365,686,372],{"class":371},[365,688,376],{"class":375},[365,690,380],{"class":379},[365,692,383],{"class":375},[365,694,386],{"class":379},[365,696,389],{"class":375},[365,698,392],{"class":371},[365,700,395],{"class":375},[365,702,399],{"class":398},[365,704,402],{"class":375},[365,706,405],{"class":375},[365,708,709],{"class":367,"line":408},[365,710,412],{"emptyLinePlaceholder":411},[365,712,713,715,717,719,721],{"class":367,"line":415},[365,714,372],{"class":371},[365,716,395],{"class":375},[365,718,422],{"class":398},[365,720,402],{"class":375},[365,722,405],{"class":375},[365,724,725],{"class":367,"line":429},[365,726,412],{"emptyLinePlaceholder":411},[365,728,729,731,733,735,737,739],{"class":367,"line":434},[365,730,438],{"class":437},[365,732,441],{"class":379},[365,734,444],{"class":375},[365,736,380],{"class":447},[365,738,450],{"class":379},[365,740,405],{"class":375},[365,742,743],{"class":367,"line":455},[365,744,412],{"emptyLinePlaceholder":411},[365,746,747,749,751,753,755,757],{"class":367,"line":460},[365,748,463],{"class":371},[365,750,466],{"class":379},[365,752,469],{"class":375},[365,754,472],{"class":447},[365,756,475],{"class":379},[365,758,478],{"class":375},[365,760,761,763,765,767,769,771,773,775,777],{"class":367,"line":481},[365,762,485],{"class":484},[365,764,488],{"class":375},[365,766,376],{"class":375},[365,768,493],{"class":484},[365,770,488],{"class":375},[365,772,395],{"class":375},[365,774,500],{"class":398},[365,776,402],{"class":375},[365,778,505],{"class":375},[365,780,781,783,785,787,789,792],{"class":367,"line":508},[365,782,511],{"class":484},[365,784,488],{"class":375},[365,786,386],{"class":379},[365,788,469],{"class":375},[365,790,791],{"class":379},"MD",[365,793,523],{"class":375},[365,795,796,798,800],{"class":367,"line":526},[365,797,529],{"class":375},[365,799,532],{"class":379},[365,801,405],{"class":375},[261,803,323],{"id":804},"large",[348,806,808],{"style":807},"height: 560px",[352,809],{":config":810},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"lg\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,812,814],{"className":358,"code":813,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.LG,\n});\n",[248,815,816,840,844,856,860,874,878,892,912,927],{"__ignoreMap":361},[365,817,818,820,822,824,826,828,830,832,834,836,838],{"class":367,"line":368},[365,819,372],{"class":371},[365,821,376],{"class":375},[365,823,380],{"class":379},[365,825,383],{"class":375},[365,827,386],{"class":379},[365,829,389],{"class":375},[365,831,392],{"class":371},[365,833,395],{"class":375},[365,835,399],{"class":398},[365,837,402],{"class":375},[365,839,405],{"class":375},[365,841,842],{"class":367,"line":408},[365,843,412],{"emptyLinePlaceholder":411},[365,845,846,848,850,852,854],{"class":367,"line":415},[365,847,372],{"class":371},[365,849,395],{"class":375},[365,851,422],{"class":398},[365,853,402],{"class":375},[365,855,405],{"class":375},[365,857,858],{"class":367,"line":429},[365,859,412],{"emptyLinePlaceholder":411},[365,861,862,864,866,868,870,872],{"class":367,"line":434},[365,863,438],{"class":437},[365,865,441],{"class":379},[365,867,444],{"class":375},[365,869,380],{"class":447},[365,871,450],{"class":379},[365,873,405],{"class":375},[365,875,876],{"class":367,"line":455},[365,877,412],{"emptyLinePlaceholder":411},[365,879,880,882,884,886,888,890],{"class":367,"line":460},[365,881,463],{"class":371},[365,883,466],{"class":379},[365,885,469],{"class":375},[365,887,472],{"class":447},[365,889,475],{"class":379},[365,891,478],{"class":375},[365,893,894,896,898,900,902,904,906,908,910],{"class":367,"line":481},[365,895,485],{"class":484},[365,897,488],{"class":375},[365,899,376],{"class":375},[365,901,493],{"class":484},[365,903,488],{"class":375},[365,905,395],{"class":375},[365,907,500],{"class":398},[365,909,402],{"class":375},[365,911,505],{"class":375},[365,913,914,916,918,920,922,925],{"class":367,"line":508},[365,915,511],{"class":484},[365,917,488],{"class":375},[365,919,386],{"class":379},[365,921,469],{"class":375},[365,923,924],{"class":379},"LG",[365,926,523],{"class":375},[365,928,929,931,933],{"class":367,"line":526},[365,930,529],{"class":375},[365,932,532],{"class":379},[365,934,405],{"class":375},[261,936,333],{"id":937},"extra-large",[348,939,941],{"style":940},"height: 600px",[352,942],{":config":943},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"xl\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,945,947],{"className":358,"code":946,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.XL,\n});\n",[248,948,949,973,977,989,993,1007,1011,1025,1045,1060],{"__ignoreMap":361},[365,950,951,953,955,957,959,961,963,965,967,969,971],{"class":367,"line":368},[365,952,372],{"class":371},[365,954,376],{"class":375},[365,956,380],{"class":379},[365,958,383],{"class":375},[365,960,386],{"class":379},[365,962,389],{"class":375},[365,964,392],{"class":371},[365,966,395],{"class":375},[365,968,399],{"class":398},[365,970,402],{"class":375},[365,972,405],{"class":375},[365,974,975],{"class":367,"line":408},[365,976,412],{"emptyLinePlaceholder":411},[365,978,979,981,983,985,987],{"class":367,"line":415},[365,980,372],{"class":371},[365,982,395],{"class":375},[365,984,422],{"class":398},[365,986,402],{"class":375},[365,988,405],{"class":375},[365,990,991],{"class":367,"line":429},[365,992,412],{"emptyLinePlaceholder":411},[365,994,995,997,999,1001,1003,1005],{"class":367,"line":434},[365,996,438],{"class":437},[365,998,441],{"class":379},[365,1000,444],{"class":375},[365,1002,380],{"class":447},[365,1004,450],{"class":379},[365,1006,405],{"class":375},[365,1008,1009],{"class":367,"line":455},[365,1010,412],{"emptyLinePlaceholder":411},[365,1012,1013,1015,1017,1019,1021,1023],{"class":367,"line":460},[365,1014,463],{"class":371},[365,1016,466],{"class":379},[365,1018,469],{"class":375},[365,1020,472],{"class":447},[365,1022,475],{"class":379},[365,1024,478],{"class":375},[365,1026,1027,1029,1031,1033,1035,1037,1039,1041,1043],{"class":367,"line":481},[365,1028,485],{"class":484},[365,1030,488],{"class":375},[365,1032,376],{"class":375},[365,1034,493],{"class":484},[365,1036,488],{"class":375},[365,1038,395],{"class":375},[365,1040,500],{"class":398},[365,1042,402],{"class":375},[365,1044,505],{"class":375},[365,1046,1047,1049,1051,1053,1055,1058],{"class":367,"line":508},[365,1048,511],{"class":484},[365,1050,488],{"class":375},[365,1052,386],{"class":379},[365,1054,469],{"class":375},[365,1056,1057],{"class":379},"XL",[365,1059,523],{"class":375},[365,1061,1062,1064,1066],{"class":367,"line":526},[365,1063,529],{"class":375},[365,1065,532],{"class":379},[365,1067,405],{"class":375},[261,1069,1071],{"id":1070},"extra-extra-large","Extra extra large",[348,1073,1075],{"style":1074},"height: 700px",[352,1076],{":config":1077},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"xxl\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[356,1079,1081],{"className":358,"code":1080,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.XXL,\n});\n",[248,1082,1083,1107,1111,1123,1127,1141,1145,1159,1179,1194],{"__ignoreMap":361},[365,1084,1085,1087,1089,1091,1093,1095,1097,1099,1101,1103,1105],{"class":367,"line":368},[365,1086,372],{"class":371},[365,1088,376],{"class":375},[365,1090,380],{"class":379},[365,1092,383],{"class":375},[365,1094,386],{"class":379},[365,1096,389],{"class":375},[365,1098,392],{"class":371},[365,1100,395],{"class":375},[365,1102,399],{"class":398},[365,1104,402],{"class":375},[365,1106,405],{"class":375},[365,1108,1109],{"class":367,"line":408},[365,1110,412],{"emptyLinePlaceholder":411},[365,1112,1113,1115,1117,1119,1121],{"class":367,"line":415},[365,1114,372],{"class":371},[365,1116,395],{"class":375},[365,1118,422],{"class":398},[365,1120,402],{"class":375},[365,1122,405],{"class":375},[365,1124,1125],{"class":367,"line":429},[365,1126,412],{"emptyLinePlaceholder":411},[365,1128,1129,1131,1133,1135,1137,1139],{"class":367,"line":434},[365,1130,438],{"class":437},[365,1132,441],{"class":379},[365,1134,444],{"class":375},[365,1136,380],{"class":447},[365,1138,450],{"class":379},[365,1140,405],{"class":375},[365,1142,1143],{"class":367,"line":455},[365,1144,412],{"emptyLinePlaceholder":411},[365,1146,1147,1149,1151,1153,1155,1157],{"class":367,"line":460},[365,1148,463],{"class":371},[365,1150,466],{"class":379},[365,1152,469],{"class":375},[365,1154,472],{"class":447},[365,1156,475],{"class":379},[365,1158,478],{"class":375},[365,1160,1161,1163,1165,1167,1169,1171,1173,1175,1177],{"class":367,"line":481},[365,1162,485],{"class":484},[365,1164,488],{"class":375},[365,1166,376],{"class":375},[365,1168,493],{"class":484},[365,1170,488],{"class":375},[365,1172,395],{"class":375},[365,1174,500],{"class":398},[365,1176,402],{"class":375},[365,1178,505],{"class":375},[365,1180,1181,1183,1185,1187,1189,1192],{"class":367,"line":508},[365,1182,511],{"class":484},[365,1184,488],{"class":375},[365,1186,386],{"class":379},[365,1188,469],{"class":375},[365,1190,1191],{"class":379},"XXL",[365,1193,523],{"class":375},[365,1195,1196,1198,1200],{"class":367,"line":526},[365,1197,529],{"class":375},[365,1199,532],{"class":379},[365,1201,405],{"class":375},[261,1203,1205],{"id":1204},"runtime","Runtime",[356,1207,1209],{"className":358,"code":1208,"language":360,"meta":361,"style":361},"import { useScena, ComponentSize } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: { src: '/video.mp4' },\n});\n\ninstance.config.mergeConfig({\n  size: ComponentSize.LG,\n});\n",[248,1210,1211,1235,1239,1251,1255,1269,1273,1295,1315,1323,1327,1347,1362],{"__ignoreMap":361},[365,1212,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233],{"class":367,"line":368},[365,1214,372],{"class":371},[365,1216,376],{"class":375},[365,1218,380],{"class":379},[365,1220,383],{"class":375},[365,1222,386],{"class":379},[365,1224,389],{"class":375},[365,1226,392],{"class":371},[365,1228,395],{"class":375},[365,1230,399],{"class":398},[365,1232,402],{"class":375},[365,1234,405],{"class":375},[365,1236,1237],{"class":367,"line":408},[365,1238,412],{"emptyLinePlaceholder":411},[365,1240,1241,1243,1245,1247,1249],{"class":367,"line":415},[365,1242,372],{"class":371},[365,1244,395],{"class":375},[365,1246,422],{"class":398},[365,1248,402],{"class":375},[365,1250,405],{"class":375},[365,1252,1253],{"class":367,"line":429},[365,1254,412],{"emptyLinePlaceholder":411},[365,1256,1257,1259,1261,1263,1265,1267],{"class":367,"line":434},[365,1258,438],{"class":437},[365,1260,441],{"class":379},[365,1262,444],{"class":375},[365,1264,380],{"class":447},[365,1266,450],{"class":379},[365,1268,405],{"class":375},[365,1270,1271],{"class":367,"line":455},[365,1272,412],{"emptyLinePlaceholder":411},[365,1274,1275,1277,1280,1282,1285,1287,1289,1291,1293],{"class":367,"line":460},[365,1276,438],{"class":437},[365,1278,1279],{"class":379}," instance ",[365,1281,444],{"class":375},[365,1283,1284],{"class":371}," await",[365,1286,466],{"class":379},[365,1288,469],{"class":375},[365,1290,472],{"class":447},[365,1292,475],{"class":379},[365,1294,478],{"class":375},[365,1296,1297,1299,1301,1303,1305,1307,1309,1311,1313],{"class":367,"line":481},[365,1298,485],{"class":484},[365,1300,488],{"class":375},[365,1302,376],{"class":375},[365,1304,493],{"class":484},[365,1306,488],{"class":375},[365,1308,395],{"class":375},[365,1310,500],{"class":398},[365,1312,402],{"class":375},[365,1314,505],{"class":375},[365,1316,1317,1319,1321],{"class":367,"line":508},[365,1318,529],{"class":375},[365,1320,532],{"class":379},[365,1322,405],{"class":375},[365,1324,1325],{"class":367,"line":526},[365,1326,412],{"emptyLinePlaceholder":411},[365,1328,1330,1333,1335,1338,1340,1343,1345],{"class":367,"line":1329},11,[365,1331,1332],{"class":379},"instance",[365,1334,469],{"class":375},[365,1336,1337],{"class":379},"config",[365,1339,469],{"class":375},[365,1341,1342],{"class":447},"mergeConfig",[365,1344,475],{"class":379},[365,1346,478],{"class":375},[365,1348,1350,1352,1354,1356,1358,1360],{"class":367,"line":1349},12,[365,1351,511],{"class":484},[365,1353,488],{"class":375},[365,1355,386],{"class":379},[365,1357,469],{"class":375},[365,1359,924],{"class":379},[365,1361,523],{"class":375},[365,1363,1365,1367,1369],{"class":367,"line":1364},13,[365,1366,529],{"class":375},[365,1368,532],{"class":379},[365,1370,405],{"class":375},[244,1372,1373],{},"The widget re-renders at the new size immediately. All child elements adapt automatically.",[261,1375,1377],{"id":1376},"overrides","Overrides",[244,1379,1380],{},"Global size applies to all components at once, but each component can override it individually. This is useful when one element needs to stand out or stay compact regardless of the overall scale:",[356,1382,1384],{"className":358,"code":1383,"language":360,"meta":361,"style":361},"{\n  videoContainer: { size: ComponentSize };\n  videoLoader:    { size: ComponentSize };\n  videoProgress:  { size: ComponentSize };\n  videoControls:  { size: ComponentSize };\n  videoVolume:    { size: ComponentSize };\n  closeButton:    { size: ComponentSize };\n  ctaButton:      { size: ComponentSize };\n}\n",[248,1385,1386,1390,1410,1428,1446,1463,1480,1497,1515],{"__ignoreMap":361},[365,1387,1388],{"class":367,"line":368},[365,1389,478],{"class":375},[365,1391,1392,1396,1398,1400,1403,1405,1407],{"class":367,"line":408},[365,1393,1395],{"class":1394},"sBMFI","  videoContainer",[365,1397,488],{"class":375},[365,1399,376],{"class":375},[365,1401,1402],{"class":1394}," size",[365,1404,488],{"class":375},[365,1406,386],{"class":379},[365,1408,1409],{"class":375}," };\n",[365,1411,1412,1415,1417,1420,1422,1424,1426],{"class":367,"line":415},[365,1413,1414],{"class":1394},"  videoLoader",[365,1416,488],{"class":375},[365,1418,1419],{"class":375},"    {",[365,1421,1402],{"class":1394},[365,1423,488],{"class":375},[365,1425,386],{"class":379},[365,1427,1409],{"class":375},[365,1429,1430,1433,1435,1438,1440,1442,1444],{"class":367,"line":429},[365,1431,1432],{"class":1394},"  videoProgress",[365,1434,488],{"class":375},[365,1436,1437],{"class":375},"  {",[365,1439,1402],{"class":1394},[365,1441,488],{"class":375},[365,1443,386],{"class":379},[365,1445,1409],{"class":375},[365,1447,1448,1451,1453,1455,1457,1459,1461],{"class":367,"line":434},[365,1449,1450],{"class":1394},"  videoControls",[365,1452,488],{"class":375},[365,1454,1437],{"class":375},[365,1456,1402],{"class":1394},[365,1458,488],{"class":375},[365,1460,386],{"class":379},[365,1462,1409],{"class":375},[365,1464,1465,1468,1470,1472,1474,1476,1478],{"class":367,"line":455},[365,1466,1467],{"class":1394},"  videoVolume",[365,1469,488],{"class":375},[365,1471,1419],{"class":375},[365,1473,1402],{"class":1394},[365,1475,488],{"class":375},[365,1477,386],{"class":379},[365,1479,1409],{"class":375},[365,1481,1482,1485,1487,1489,1491,1493,1495],{"class":367,"line":460},[365,1483,1484],{"class":1394},"  closeButton",[365,1486,488],{"class":375},[365,1488,1419],{"class":375},[365,1490,1402],{"class":1394},[365,1492,488],{"class":375},[365,1494,386],{"class":379},[365,1496,1409],{"class":375},[365,1498,1499,1502,1504,1507,1509,1511,1513],{"class":367,"line":481},[365,1500,1501],{"class":1394},"  ctaButton",[365,1503,488],{"class":375},[365,1505,1506],{"class":375},"      {",[365,1508,1402],{"class":1394},[365,1510,488],{"class":375},[365,1512,386],{"class":379},[365,1514,1409],{"class":375},[365,1516,1517],{"class":367,"line":508},[365,1518,1519],{"class":375},"}\n",[1521,1522,1523],"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":361,"searchDepth":368,"depth":408,"links":1525},[1526,1527,1528,1529,1530,1531,1532,1533,1534],{"id":263,"depth":408,"text":264},{"id":345,"depth":408,"text":346},{"id":537,"depth":408,"text":303},{"id":670,"depth":408,"text":671},{"id":804,"depth":408,"text":323},{"id":937,"depth":408,"text":333},{"id":1070,"depth":408,"text":1071},{"id":1204,"depth":408,"text":1205},{"id":1376,"depth":408,"text":1377},"Configure widget dimensions with ComponentSize — xs, sm, md, lg, xl, xxl.",null,{},{"title":32,"description":1535},"yclnXjO2uYWtPdK5gn3r-6Ot7PrFFBNPDUCaahYicIs",[1541,1543],{"title":28,"path":29,"stem":30,"description":1542,"children":-1},"Structure of ScenaConfig and the principle of disabling components with false.",{"title":36,"path":37,"stem":38,"description":1544,"children":-1},"Set widget shape — circle, portrait, landscape, or square.",1777984319512]