[{"data":1,"prerenderedAt":1604},["ShallowReactive",2],{"navigation":3,"/examples/custom-controls":238,"/examples/custom-controls-surround":1599},[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":198,"body":240,"description":1593,"extension":1594,"links":1595,"meta":1596,"navigation":619,"path":199,"seo":1597,"stem":200,"__hash__":1598},"docs/08.examples/4.custom-controls.md",{"type":241,"value":242,"toc":1589},"minimark",[243,266,293,300,305,312,315,318,542,1575,1585],[244,245,246,247,251,252,251,255,251,258,261,262,265],"p",{},"All built-in controls — ",[248,249,250],"code",{},"videoControls",", ",[248,253,254],{},"videoProgress",[248,256,257],{},"videoVolume",[248,259,260],{},"ctaButton",", and ",[248,263,264],{},"closeButton"," — can be individually disabled via config, leaving the widget as a bare video surface without any interactive elements.",[244,267,268,269,272,273,251,276,251,279,251,282,251,285,288,289,292],{},"UI state is managed through two APIs on the returned instance: ",[248,270,271],{},"instance.api.controller"," for imperative playback control (",[248,274,275],{},"play",[248,277,278],{},"pause",[248,280,281],{},"stop",[248,283,284],{},"seek",[248,286,287],{},"toggleMute",") and ",[248,290,291],{},"instance.api.events"," for subscribing to state changes that should be reflected in your own components.",[294,295,297],"callout",{"color":296},"warning",[244,298,299],{},"Disabling built-in controls does not affect the widget's internal state machine — events still fire and the controller API remains fully functional.",[301,302,304],"h2",{"id":303},"demo","Demo",[306,307,308],"scena-container",{},[309,310],"scena-component-custom-controls",{":config":311},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"relative\"}}",[301,313,314],{"id":248},"Code",[244,316,317],{},"Disable the built-in controls and wire up your own buttons to the controller:",[319,320,326],"pre",{"className":321,"code":322,"filename":323,"language":324,"meta":325,"style":325},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"widget-target\">\u003C/div>\n\u003Cdiv id=\"controls\">\n  \u003Cbutton id=\"rewind\">Rewind\u003C/button>\n  \u003Cbutton id=\"play\">Play\u003C/button>\n  \u003Cbutton id=\"stop\">Stop\u003C/button>\n  \u003Cbutton id=\"forward\">Forward\u003C/button>\n  \u003Cbutton id=\"mute\">Mute\u003C/button>\n\u003C/div>\n","index.html","html","",[248,327,328,365,385,419,447,475,504,533],{"__ignoreMap":325},[329,330,333,337,341,345,348,351,355,357,360,362],"span",{"class":331,"line":332},"line",1,[329,334,336],{"class":335},"sMK4o","\u003C",[329,338,340],{"class":339},"swJcz","div",[329,342,344],{"class":343},"spNyl"," id",[329,346,347],{"class":335},"=",[329,349,350],{"class":335},"\"",[329,352,354],{"class":353},"sfazB","widget-target",[329,356,350],{"class":335},[329,358,359],{"class":335},">\u003C/",[329,361,340],{"class":339},[329,363,364],{"class":335},">\n",[329,366,368,370,372,374,376,378,381,383],{"class":331,"line":367},2,[329,369,336],{"class":335},[329,371,340],{"class":339},[329,373,344],{"class":343},[329,375,347],{"class":335},[329,377,350],{"class":335},[329,379,380],{"class":353},"controls",[329,382,350],{"class":335},[329,384,364],{"class":335},[329,386,388,391,394,396,398,400,403,405,408,412,415,417],{"class":331,"line":387},3,[329,389,390],{"class":335},"  \u003C",[329,392,393],{"class":339},"button",[329,395,344],{"class":343},[329,397,347],{"class":335},[329,399,350],{"class":335},[329,401,402],{"class":353},"rewind",[329,404,350],{"class":335},[329,406,407],{"class":335},">",[329,409,411],{"class":410},"sTEyZ","Rewind",[329,413,414],{"class":335},"\u003C/",[329,416,393],{"class":339},[329,418,364],{"class":335},[329,420,422,424,426,428,430,432,434,436,438,441,443,445],{"class":331,"line":421},4,[329,423,390],{"class":335},[329,425,393],{"class":339},[329,427,344],{"class":343},[329,429,347],{"class":335},[329,431,350],{"class":335},[329,433,275],{"class":353},[329,435,350],{"class":335},[329,437,407],{"class":335},[329,439,440],{"class":410},"Play",[329,442,414],{"class":335},[329,444,393],{"class":339},[329,446,364],{"class":335},[329,448,450,452,454,456,458,460,462,464,466,469,471,473],{"class":331,"line":449},5,[329,451,390],{"class":335},[329,453,393],{"class":339},[329,455,344],{"class":343},[329,457,347],{"class":335},[329,459,350],{"class":335},[329,461,281],{"class":353},[329,463,350],{"class":335},[329,465,407],{"class":335},[329,467,468],{"class":410},"Stop",[329,470,414],{"class":335},[329,472,393],{"class":339},[329,474,364],{"class":335},[329,476,478,480,482,484,486,488,491,493,495,498,500,502],{"class":331,"line":477},6,[329,479,390],{"class":335},[329,481,393],{"class":339},[329,483,344],{"class":343},[329,485,347],{"class":335},[329,487,350],{"class":335},[329,489,490],{"class":353},"forward",[329,492,350],{"class":335},[329,494,407],{"class":335},[329,496,497],{"class":410},"Forward",[329,499,414],{"class":335},[329,501,393],{"class":339},[329,503,364],{"class":335},[329,505,507,509,511,513,515,517,520,522,524,527,529,531],{"class":331,"line":506},7,[329,508,390],{"class":335},[329,510,393],{"class":339},[329,512,344],{"class":343},[329,514,347],{"class":335},[329,516,350],{"class":335},[329,518,519],{"class":353},"mute",[329,521,350],{"class":335},[329,523,407],{"class":335},[329,525,526],{"class":410},"Mute",[329,528,414],{"class":335},[329,530,393],{"class":339},[329,532,364],{"class":335},[329,534,536,538,540],{"class":331,"line":535},8,[329,537,414],{"class":335},[329,539,340],{"class":339},[329,541,364],{"class":335},[319,543,548],{"className":544,"code":545,"filename":546,"language":547,"meta":325,"style":325},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  useScena,\n  ScenaEvent,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: {\n    src: '/video.mp4',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n  size: ComponentSize.MD,\n  shape: ComponentShape.CIRCLE,\n  container: {\n    position: ComponentPosition.RELATIVE,\n  },\n  videoControls: false,\n  videoProgress: false,\n  videoVolume: false,\n  ctaButton: false,\n  closeButton: false,\n}, document.getElementById('widget-target'));\n\nconst { controller, events } = instance.api;\n\nlet isPlaying = false;\n\nlet isMuted = controller.isMuted;\n\nevents.on(ScenaEvent.ON_VIDEO_PLAY, () => {\n  isPlaying = true;\n});\n\nevents.on(ScenaEvent.ON_VIDEO_PAUSE, () => {\n  isPlaying = false;\n});\n\nevents.on(ScenaEvent.ON_VIDEO_VOLUME_CHANGE, () => {\n  isMuted = controller.isMuted;\n});\n\ndocument.getElementById('rewind').addEventListener('click', () => {\n  controller.seek(Math.max(0, controller.currentTime - 10));\n});\n\ndocument.getElementById('play').addEventListener('click', () => {\n  isPlaying ? controller.pause() : controller.play();\n});\n\ndocument.getElementById('stop').addEventListener('click', () => {\n  controller.stop();\n});\n\ndocument.getElementById('forward').addEventListener('click', () => {\n  controller.seek(Math.min(controller.duration, controller.currentTime + 10));\n});\n\ndocument.getElementById('mute').addEventListener('click', () => {\n  controller.toggleMute();\n});\n","main.ts","ts",[248,549,550,559,567,574,581,588,595,615,621,635,640,660,665,693,704,721,735,748,760,766,784,802,812,830,835,847,859,871,883,895,922,927,959,964,979,984,1003,1008,1037,1049,1059,1064,1088,1099,1108,1113,1137,1153,1162,1167,1209,1254,1263,1268,1307,1336,1345,1350,1389,1402,1411,1416,1455,1500,1509,1514,1553,1566],{"__ignoreMap":325},[329,551,552,556],{"class":331,"line":332},[329,553,555],{"class":554},"s7zQu","import",[329,557,558],{"class":335}," {\n",[329,560,561,564],{"class":331,"line":367},[329,562,563],{"class":410},"  useScena",[329,565,566],{"class":335},",\n",[329,568,569,572],{"class":331,"line":387},[329,570,571],{"class":410},"  ScenaEvent",[329,573,566],{"class":335},[329,575,576,579],{"class":331,"line":421},[329,577,578],{"class":410},"  ComponentSize",[329,580,566],{"class":335},[329,582,583,586],{"class":331,"line":449},[329,584,585],{"class":410},"  ComponentShape",[329,587,566],{"class":335},[329,589,590,593],{"class":331,"line":477},[329,591,592],{"class":410},"  ComponentPosition",[329,594,566],{"class":335},[329,596,597,600,603,606,609,612],{"class":331,"line":506},[329,598,599],{"class":335},"}",[329,601,602],{"class":554}," from",[329,604,605],{"class":335}," '",[329,607,608],{"class":353},"@retoo/scena",[329,610,611],{"class":335},"'",[329,613,614],{"class":335},";\n",[329,616,617],{"class":331,"line":535},[329,618,620],{"emptyLinePlaceholder":619},true,"\n",[329,622,624,626,628,631,633],{"class":331,"line":623},9,[329,625,555],{"class":554},[329,627,605],{"class":335},[329,629,630],{"class":353},"@retoo/scena/styles",[329,632,611],{"class":335},[329,634,614],{"class":335},[329,636,638],{"class":331,"line":637},10,[329,639,620],{"emptyLinePlaceholder":619},[329,641,643,646,649,651,655,658],{"class":331,"line":642},11,[329,644,645],{"class":343},"const",[329,647,648],{"class":410}," scena ",[329,650,347],{"class":335},[329,652,654],{"class":653},"s2Zo4"," useScena",[329,656,657],{"class":410},"()",[329,659,614],{"class":335},[329,661,663],{"class":331,"line":662},12,[329,664,620],{"emptyLinePlaceholder":619},[329,666,668,670,673,675,678,681,684,687,690],{"class":331,"line":667},13,[329,669,645],{"class":343},[329,671,672],{"class":410}," instance ",[329,674,347],{"class":335},[329,676,677],{"class":554}," await",[329,679,680],{"class":410}," scena",[329,682,683],{"class":335},".",[329,685,686],{"class":653},"mount",[329,688,689],{"class":410},"(",[329,691,692],{"class":335},"{\n",[329,694,696,699,702],{"class":331,"line":695},14,[329,697,698],{"class":339},"  video",[329,700,701],{"class":335},":",[329,703,558],{"class":335},[329,705,707,710,712,714,717,719],{"class":331,"line":706},15,[329,708,709],{"class":339},"    src",[329,711,701],{"class":335},[329,713,605],{"class":335},[329,715,716],{"class":353},"/video.mp4",[329,718,611],{"class":335},[329,720,566],{"class":335},[329,722,724,727,729,733],{"class":331,"line":723},16,[329,725,726],{"class":339},"    autoplay",[329,728,701],{"class":335},[329,730,732],{"class":731},"sfNiH"," false",[329,734,566],{"class":335},[329,736,738,741,743,746],{"class":331,"line":737},17,[329,739,740],{"class":339},"    loop",[329,742,701],{"class":335},[329,744,745],{"class":731}," true",[329,747,566],{"class":335},[329,749,751,754,756,758],{"class":331,"line":750},18,[329,752,753],{"class":339},"    muted",[329,755,701],{"class":335},[329,757,745],{"class":731},[329,759,566],{"class":335},[329,761,763],{"class":331,"line":762},19,[329,764,765],{"class":335},"  },\n",[329,767,769,772,774,777,779,782],{"class":331,"line":768},20,[329,770,771],{"class":339},"  size",[329,773,701],{"class":335},[329,775,776],{"class":410}," ComponentSize",[329,778,683],{"class":335},[329,780,781],{"class":410},"MD",[329,783,566],{"class":335},[329,785,787,790,792,795,797,800],{"class":331,"line":786},21,[329,788,789],{"class":339},"  shape",[329,791,701],{"class":335},[329,793,794],{"class":410}," ComponentShape",[329,796,683],{"class":335},[329,798,799],{"class":410},"CIRCLE",[329,801,566],{"class":335},[329,803,805,808,810],{"class":331,"line":804},22,[329,806,807],{"class":339},"  container",[329,809,701],{"class":335},[329,811,558],{"class":335},[329,813,815,818,820,823,825,828],{"class":331,"line":814},23,[329,816,817],{"class":339},"    position",[329,819,701],{"class":335},[329,821,822],{"class":410}," ComponentPosition",[329,824,683],{"class":335},[329,826,827],{"class":410},"RELATIVE",[329,829,566],{"class":335},[329,831,833],{"class":331,"line":832},24,[329,834,765],{"class":335},[329,836,838,841,843,845],{"class":331,"line":837},25,[329,839,840],{"class":339},"  videoControls",[329,842,701],{"class":335},[329,844,732],{"class":731},[329,846,566],{"class":335},[329,848,850,853,855,857],{"class":331,"line":849},26,[329,851,852],{"class":339},"  videoProgress",[329,854,701],{"class":335},[329,856,732],{"class":731},[329,858,566],{"class":335},[329,860,862,865,867,869],{"class":331,"line":861},27,[329,863,864],{"class":339},"  videoVolume",[329,866,701],{"class":335},[329,868,732],{"class":731},[329,870,566],{"class":335},[329,872,874,877,879,881],{"class":331,"line":873},28,[329,875,876],{"class":339},"  ctaButton",[329,878,701],{"class":335},[329,880,732],{"class":731},[329,882,566],{"class":335},[329,884,886,889,891,893],{"class":331,"line":885},29,[329,887,888],{"class":339},"  closeButton",[329,890,701],{"class":335},[329,892,732],{"class":731},[329,894,566],{"class":335},[329,896,898,901,904,906,909,911,913,915,917,920],{"class":331,"line":897},30,[329,899,900],{"class":335},"},",[329,902,903],{"class":410}," document",[329,905,683],{"class":335},[329,907,908],{"class":653},"getElementById",[329,910,689],{"class":410},[329,912,611],{"class":335},[329,914,354],{"class":353},[329,916,611],{"class":335},[329,918,919],{"class":410},"))",[329,921,614],{"class":335},[329,923,925],{"class":331,"line":924},31,[329,926,620],{"emptyLinePlaceholder":619},[329,928,930,932,935,938,941,944,946,949,952,954,957],{"class":331,"line":929},32,[329,931,645],{"class":343},[329,933,934],{"class":335}," {",[329,936,937],{"class":410}," controller",[329,939,940],{"class":335},",",[329,942,943],{"class":410}," events ",[329,945,599],{"class":335},[329,947,948],{"class":335}," =",[329,950,951],{"class":410}," instance",[329,953,683],{"class":335},[329,955,956],{"class":410},"api",[329,958,614],{"class":335},[329,960,962],{"class":331,"line":961},33,[329,963,620],{"emptyLinePlaceholder":619},[329,965,967,970,973,975,977],{"class":331,"line":966},34,[329,968,969],{"class":343},"let",[329,971,972],{"class":410}," isPlaying ",[329,974,347],{"class":335},[329,976,732],{"class":731},[329,978,614],{"class":335},[329,980,982],{"class":331,"line":981},35,[329,983,620],{"emptyLinePlaceholder":619},[329,985,987,989,992,994,996,998,1001],{"class":331,"line":986},36,[329,988,969],{"class":343},[329,990,991],{"class":410}," isMuted ",[329,993,347],{"class":335},[329,995,937],{"class":410},[329,997,683],{"class":335},[329,999,1000],{"class":410},"isMuted",[329,1002,614],{"class":335},[329,1004,1006],{"class":331,"line":1005},37,[329,1007,620],{"emptyLinePlaceholder":619},[329,1009,1011,1014,1016,1019,1022,1024,1027,1029,1032,1035],{"class":331,"line":1010},38,[329,1012,1013],{"class":410},"events",[329,1015,683],{"class":335},[329,1017,1018],{"class":653},"on",[329,1020,1021],{"class":410},"(ScenaEvent",[329,1023,683],{"class":335},[329,1025,1026],{"class":410},"ON_VIDEO_PLAY",[329,1028,940],{"class":335},[329,1030,1031],{"class":335}," ()",[329,1033,1034],{"class":343}," =>",[329,1036,558],{"class":335},[329,1038,1040,1043,1045,1047],{"class":331,"line":1039},39,[329,1041,1042],{"class":410},"  isPlaying",[329,1044,948],{"class":335},[329,1046,745],{"class":731},[329,1048,614],{"class":335},[329,1050,1052,1054,1057],{"class":331,"line":1051},40,[329,1053,599],{"class":335},[329,1055,1056],{"class":410},")",[329,1058,614],{"class":335},[329,1060,1062],{"class":331,"line":1061},41,[329,1063,620],{"emptyLinePlaceholder":619},[329,1065,1067,1069,1071,1073,1075,1077,1080,1082,1084,1086],{"class":331,"line":1066},42,[329,1068,1013],{"class":410},[329,1070,683],{"class":335},[329,1072,1018],{"class":653},[329,1074,1021],{"class":410},[329,1076,683],{"class":335},[329,1078,1079],{"class":410},"ON_VIDEO_PAUSE",[329,1081,940],{"class":335},[329,1083,1031],{"class":335},[329,1085,1034],{"class":343},[329,1087,558],{"class":335},[329,1089,1091,1093,1095,1097],{"class":331,"line":1090},43,[329,1092,1042],{"class":410},[329,1094,948],{"class":335},[329,1096,732],{"class":731},[329,1098,614],{"class":335},[329,1100,1102,1104,1106],{"class":331,"line":1101},44,[329,1103,599],{"class":335},[329,1105,1056],{"class":410},[329,1107,614],{"class":335},[329,1109,1111],{"class":331,"line":1110},45,[329,1112,620],{"emptyLinePlaceholder":619},[329,1114,1116,1118,1120,1122,1124,1126,1129,1131,1133,1135],{"class":331,"line":1115},46,[329,1117,1013],{"class":410},[329,1119,683],{"class":335},[329,1121,1018],{"class":653},[329,1123,1021],{"class":410},[329,1125,683],{"class":335},[329,1127,1128],{"class":410},"ON_VIDEO_VOLUME_CHANGE",[329,1130,940],{"class":335},[329,1132,1031],{"class":335},[329,1134,1034],{"class":343},[329,1136,558],{"class":335},[329,1138,1140,1143,1145,1147,1149,1151],{"class":331,"line":1139},47,[329,1141,1142],{"class":410},"  isMuted",[329,1144,948],{"class":335},[329,1146,937],{"class":410},[329,1148,683],{"class":335},[329,1150,1000],{"class":410},[329,1152,614],{"class":335},[329,1154,1156,1158,1160],{"class":331,"line":1155},48,[329,1157,599],{"class":335},[329,1159,1056],{"class":410},[329,1161,614],{"class":335},[329,1163,1165],{"class":331,"line":1164},49,[329,1166,620],{"emptyLinePlaceholder":619},[329,1168,1170,1173,1175,1177,1179,1181,1183,1185,1187,1189,1192,1194,1196,1199,1201,1203,1205,1207],{"class":331,"line":1169},50,[329,1171,1172],{"class":410},"document",[329,1174,683],{"class":335},[329,1176,908],{"class":653},[329,1178,689],{"class":410},[329,1180,611],{"class":335},[329,1182,402],{"class":353},[329,1184,611],{"class":335},[329,1186,1056],{"class":410},[329,1188,683],{"class":335},[329,1190,1191],{"class":653},"addEventListener",[329,1193,689],{"class":410},[329,1195,611],{"class":335},[329,1197,1198],{"class":353},"click",[329,1200,611],{"class":335},[329,1202,940],{"class":335},[329,1204,1031],{"class":335},[329,1206,1034],{"class":343},[329,1208,558],{"class":335},[329,1210,1212,1215,1217,1219,1221,1224,1226,1229,1231,1235,1237,1239,1241,1244,1247,1250,1252],{"class":331,"line":1211},51,[329,1213,1214],{"class":410},"  controller",[329,1216,683],{"class":335},[329,1218,284],{"class":653},[329,1220,689],{"class":339},[329,1222,1223],{"class":410},"Math",[329,1225,683],{"class":335},[329,1227,1228],{"class":653},"max",[329,1230,689],{"class":339},[329,1232,1234],{"class":1233},"sbssI","0",[329,1236,940],{"class":335},[329,1238,937],{"class":410},[329,1240,683],{"class":335},[329,1242,1243],{"class":410},"currentTime",[329,1245,1246],{"class":335}," -",[329,1248,1249],{"class":1233}," 10",[329,1251,919],{"class":339},[329,1253,614],{"class":335},[329,1255,1257,1259,1261],{"class":331,"line":1256},52,[329,1258,599],{"class":335},[329,1260,1056],{"class":410},[329,1262,614],{"class":335},[329,1264,1266],{"class":331,"line":1265},53,[329,1267,620],{"emptyLinePlaceholder":619},[329,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305],{"class":331,"line":1270},54,[329,1272,1172],{"class":410},[329,1274,683],{"class":335},[329,1276,908],{"class":653},[329,1278,689],{"class":410},[329,1280,611],{"class":335},[329,1282,275],{"class":353},[329,1284,611],{"class":335},[329,1286,1056],{"class":410},[329,1288,683],{"class":335},[329,1290,1191],{"class":653},[329,1292,689],{"class":410},[329,1294,611],{"class":335},[329,1296,1198],{"class":353},[329,1298,611],{"class":335},[329,1300,940],{"class":335},[329,1302,1031],{"class":335},[329,1304,1034],{"class":343},[329,1306,558],{"class":335},[329,1308,1310,1312,1315,1317,1319,1321,1324,1326,1328,1330,1332,1334],{"class":331,"line":1309},55,[329,1311,1042],{"class":410},[329,1313,1314],{"class":335}," ?",[329,1316,937],{"class":410},[329,1318,683],{"class":335},[329,1320,278],{"class":653},[329,1322,1323],{"class":339},"() ",[329,1325,701],{"class":335},[329,1327,937],{"class":410},[329,1329,683],{"class":335},[329,1331,275],{"class":653},[329,1333,657],{"class":339},[329,1335,614],{"class":335},[329,1337,1339,1341,1343],{"class":331,"line":1338},56,[329,1340,599],{"class":335},[329,1342,1056],{"class":410},[329,1344,614],{"class":335},[329,1346,1348],{"class":331,"line":1347},57,[329,1349,620],{"emptyLinePlaceholder":619},[329,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387],{"class":331,"line":1352},58,[329,1354,1172],{"class":410},[329,1356,683],{"class":335},[329,1358,908],{"class":653},[329,1360,689],{"class":410},[329,1362,611],{"class":335},[329,1364,281],{"class":353},[329,1366,611],{"class":335},[329,1368,1056],{"class":410},[329,1370,683],{"class":335},[329,1372,1191],{"class":653},[329,1374,689],{"class":410},[329,1376,611],{"class":335},[329,1378,1198],{"class":353},[329,1380,611],{"class":335},[329,1382,940],{"class":335},[329,1384,1031],{"class":335},[329,1386,1034],{"class":343},[329,1388,558],{"class":335},[329,1390,1392,1394,1396,1398,1400],{"class":331,"line":1391},59,[329,1393,1214],{"class":410},[329,1395,683],{"class":335},[329,1397,281],{"class":653},[329,1399,657],{"class":339},[329,1401,614],{"class":335},[329,1403,1405,1407,1409],{"class":331,"line":1404},60,[329,1406,599],{"class":335},[329,1408,1056],{"class":410},[329,1410,614],{"class":335},[329,1412,1414],{"class":331,"line":1413},61,[329,1415,620],{"emptyLinePlaceholder":619},[329,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453],{"class":331,"line":1418},62,[329,1420,1172],{"class":410},[329,1422,683],{"class":335},[329,1424,908],{"class":653},[329,1426,689],{"class":410},[329,1428,611],{"class":335},[329,1430,490],{"class":353},[329,1432,611],{"class":335},[329,1434,1056],{"class":410},[329,1436,683],{"class":335},[329,1438,1191],{"class":653},[329,1440,689],{"class":410},[329,1442,611],{"class":335},[329,1444,1198],{"class":353},[329,1446,611],{"class":335},[329,1448,940],{"class":335},[329,1450,1031],{"class":335},[329,1452,1034],{"class":343},[329,1454,558],{"class":335},[329,1456,1458,1460,1462,1464,1466,1468,1470,1473,1475,1478,1480,1483,1485,1487,1489,1491,1494,1496,1498],{"class":331,"line":1457},63,[329,1459,1214],{"class":410},[329,1461,683],{"class":335},[329,1463,284],{"class":653},[329,1465,689],{"class":339},[329,1467,1223],{"class":410},[329,1469,683],{"class":335},[329,1471,1472],{"class":653},"min",[329,1474,689],{"class":339},[329,1476,1477],{"class":410},"controller",[329,1479,683],{"class":335},[329,1481,1482],{"class":410},"duration",[329,1484,940],{"class":335},[329,1486,937],{"class":410},[329,1488,683],{"class":335},[329,1490,1243],{"class":410},[329,1492,1493],{"class":335}," +",[329,1495,1249],{"class":1233},[329,1497,919],{"class":339},[329,1499,614],{"class":335},[329,1501,1503,1505,1507],{"class":331,"line":1502},64,[329,1504,599],{"class":335},[329,1506,1056],{"class":410},[329,1508,614],{"class":335},[329,1510,1512],{"class":331,"line":1511},65,[329,1513,620],{"emptyLinePlaceholder":619},[329,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551],{"class":331,"line":1516},66,[329,1518,1172],{"class":410},[329,1520,683],{"class":335},[329,1522,908],{"class":653},[329,1524,689],{"class":410},[329,1526,611],{"class":335},[329,1528,519],{"class":353},[329,1530,611],{"class":335},[329,1532,1056],{"class":410},[329,1534,683],{"class":335},[329,1536,1191],{"class":653},[329,1538,689],{"class":410},[329,1540,611],{"class":335},[329,1542,1198],{"class":353},[329,1544,611],{"class":335},[329,1546,940],{"class":335},[329,1548,1031],{"class":335},[329,1550,1034],{"class":343},[329,1552,558],{"class":335},[329,1554,1556,1558,1560,1562,1564],{"class":331,"line":1555},67,[329,1557,1214],{"class":410},[329,1559,683],{"class":335},[329,1561,287],{"class":653},[329,1563,657],{"class":339},[329,1565,614],{"class":335},[329,1567,1569,1571,1573],{"class":331,"line":1568},68,[329,1570,599],{"class":335},[329,1572,1056],{"class":410},[329,1574,614],{"class":335},[294,1576,1578],{"icon":1577,"to":120},"i-lucide-arrow-right",[244,1579,1580,1581,683],{},"Full list of controller methods and reactive state — see ",[1582,1583,1584],"strong",{},"Instance API",[1586,1587,1588],"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":325,"searchDepth":332,"depth":367,"links":1590},[1591,1592],{"id":303,"depth":367,"text":304},{"id":248,"depth":367,"text":314},"Build your own UI on top of the instance API — progress bar, buttons, and overlays.","md",null,{},{"title":198,"description":1593},"jA7__Otqb8F2fmwl1q-VQDyTVYg6-0ffJ57oMA8jlyc",[1600,1602],{"title":194,"path":195,"stem":196,"description":1601,"children":-1},"Adapt widget size and shape across breakpoints using the responsive constants.",{"title":202,"path":203,"stem":204,"description":1603,"children":-1},"Mount the widget only when its container enters the viewport using IntersectionObserver.",1777984324356]