[{"data":1,"prerenderedAt":866},["ShallowReactive",2],{"navigation":3,"/components/video-progress":238,"/components/video-progress-surround":861},[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":81,"body":240,"description":854,"extension":855,"links":856,"meta":857,"navigation":858,"path":82,"seo":859,"stem":83,"__hash__":860},"docs/03.components/6.video-progress.md",{"type":241,"value":242,"toc":846},"minimark",[243,247,252,351,355,362,473,477,480,530,534,539,597,601,618,726,730,842],[244,245,246],"p",{},"Video progress bar shows the current playback position and adapts its shape to match the widget — a horizontal line for square, portrait, and landscape shapes, and a circular track for the circle shape. Users can drag it to seek to any point in the video.",[248,249,251],"h2",{"id":250},"config","Config",[253,254,255,271],"table",{},[256,257,258],"thead",{},[259,260,261,265,268],"tr",{},[262,263,264],"th",{},"Property",[262,266,267],{},"Type",[262,269,270],{},"Description",[272,273,274,291,306,321,336],"tbody",{},[259,275,276,283,288],{},[277,278,279],"td",{},[280,281,282],"code",{},"hasBuffer",[277,284,285],{},[280,286,287],{},"boolean",[277,289,290],{},"Show the buffered range indicator",[259,292,293,298,303],{},[277,294,295],{},[280,296,297],{},"aria",[277,299,300],{},[280,301,302],{},"Partial\u003CComponentAriaProps>",[277,304,305],{},"ARIA attributes",[259,307,308,313,318],{},[277,309,310],{},[280,311,312],{},"customThickness",[277,314,315],{},[280,316,317],{},"Partial\u003CScenaVideoProgressComponentThickness>",[277,319,320],{},"Override track thickness",[259,322,323,328,333],{},[277,324,325],{},[280,326,327],{},"customClasses",[277,329,330],{},[280,331,332],{},"Partial\u003CScenaVideoProgressComponentClasses>",[277,334,335],{},"Custom CSS classes",[259,337,338,343,348],{},[277,339,340],{},[280,341,342],{},"customStyles",[277,344,345],{},[280,346,347],{},"Partial\u003CScenaVideoProgressComponentStyles>",[277,349,350],{},"Custom inline styles",[248,352,354],{"id":353},"example","Example",[356,357,358],"scena-container",{},[359,360],"scena-component",{":config":361},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"}}",[363,364,369],"pre",{"className":365,"code":366,"language":367,"meta":368,"style":368},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  videoProgress: {\n    hasBuffer: true,\n  },\n});\n","ts","",[280,370,371,398,429,440,455,461],{"__ignoreMap":368},[372,373,376,380,384,388,392,395],"span",{"class":374,"line":375},"line",1,[372,377,379],{"class":378},"s7zQu","await",[372,381,383],{"class":382},"sTEyZ"," scena",[372,385,387],{"class":386},"sMK4o",".",[372,389,391],{"class":390},"s2Zo4","mount",[372,393,394],{"class":382},"(",[372,396,397],{"class":386},"{\n",[372,399,401,405,408,411,414,416,419,423,426],{"class":374,"line":400},2,[372,402,404],{"class":403},"swJcz","  video",[372,406,407],{"class":386},":",[372,409,410],{"class":386}," {",[372,412,413],{"class":403}," src",[372,415,407],{"class":386},[372,417,418],{"class":386}," '",[372,420,422],{"class":421},"sfazB","/video.mp4",[372,424,425],{"class":386},"'",[372,427,428],{"class":386}," },\n",[372,430,432,435,437],{"class":374,"line":431},3,[372,433,434],{"class":403},"  videoProgress",[372,436,407],{"class":386},[372,438,439],{"class":386}," {\n",[372,441,443,446,448,452],{"class":374,"line":442},4,[372,444,445],{"class":403},"    hasBuffer",[372,447,407],{"class":386},[372,449,451],{"class":450},"sfNiH"," true",[372,453,454],{"class":386},",\n",[372,456,458],{"class":374,"line":457},5,[372,459,460],{"class":386},"  },\n",[372,462,464,467,470],{"class":374,"line":463},6,[372,465,466],{"class":386},"}",[372,468,469],{"class":382},")",[372,471,472],{"class":386},";\n",[248,474,476],{"id":475},"variants","Variants",[244,478,479],{},"The progress bar automatically adapts to the widget shape:",[253,481,482,493],{},[256,483,484],{},[259,485,486,489,491],{},[262,487,488],{},"Variant",[262,490,36],{},[262,492,270],{},[272,494,495,516],{},[259,496,497,501,513],{},[277,498,499],{},[280,500,374],{},[277,502,503,506,507,506,510],{},[280,504,505],{},"square",", ",[280,508,509],{},"portrait",[280,511,512],{},"landscape",[277,514,515],{},"Horizontal bar at the bottom",[259,517,518,523,527],{},[277,519,520],{},[280,521,522],{},"circle",[277,524,525],{},[280,526,522],{},[277,528,529],{},"Circular track around the widget",[248,531,533],{"id":532},"disabling","Disabling",[356,535,536],{},[359,537],{":config":538},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"videoProgress\":false}",[363,540,542],{"className":365,"code":541,"language":367,"meta":368,"style":368},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoProgress: false,\n});\n",[280,543,544,558,578,589],{"__ignoreMap":368},[372,545,546,548,550,552,554,556],{"class":374,"line":375},[372,547,379],{"class":378},[372,549,383],{"class":382},[372,551,387],{"class":386},[372,553,391],{"class":390},[372,555,394],{"class":382},[372,557,397],{"class":386},[372,559,560,562,564,566,568,570,572,574,576],{"class":374,"line":400},[372,561,404],{"class":403},[372,563,407],{"class":386},[372,565,410],{"class":386},[372,567,413],{"class":403},[372,569,407],{"class":386},[372,571,418],{"class":386},[372,573,422],{"class":421},[372,575,425],{"class":386},[372,577,428],{"class":386},[372,579,580,582,584,587],{"class":374,"line":431},[372,581,434],{"class":403},[372,583,407],{"class":386},[372,585,586],{"class":450}," false",[372,588,454],{"class":386},[372,590,591,593,595],{"class":374,"line":442},[372,592,466],{"class":386},[372,594,469],{"class":382},[372,596,472],{"class":386},[248,598,600],{"id":599},"customization","Customization",[244,602,603,604,506,607,506,610,613,614,617],{},"The progress bar accepts ",[280,605,606],{},"root",[280,608,609],{},"track",[280,611,612],{},"progress",", and ",[280,615,616],{},"buffered"," as target keys:",[363,619,621],{"className":365,"code":620,"language":367,"meta":368,"style":368},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoProgress: {\n    customClasses: {\n      progress: 'bg-blue-500',\n      buffered: 'bg-white/20',\n    },\n  },\n});\n",[280,622,623,637,657,665,674,690,706,712,717],{"__ignoreMap":368},[372,624,625,627,629,631,633,635],{"class":374,"line":375},[372,626,379],{"class":378},[372,628,383],{"class":382},[372,630,387],{"class":386},[372,632,391],{"class":390},[372,634,394],{"class":382},[372,636,397],{"class":386},[372,638,639,641,643,645,647,649,651,653,655],{"class":374,"line":400},[372,640,404],{"class":403},[372,642,407],{"class":386},[372,644,410],{"class":386},[372,646,413],{"class":403},[372,648,407],{"class":386},[372,650,418],{"class":386},[372,652,422],{"class":421},[372,654,425],{"class":386},[372,656,428],{"class":386},[372,658,659,661,663],{"class":374,"line":431},[372,660,434],{"class":403},[372,662,407],{"class":386},[372,664,439],{"class":386},[372,666,667,670,672],{"class":374,"line":442},[372,668,669],{"class":403},"    customClasses",[372,671,407],{"class":386},[372,673,439],{"class":386},[372,675,676,679,681,683,686,688],{"class":374,"line":457},[372,677,678],{"class":403},"      progress",[372,680,407],{"class":386},[372,682,418],{"class":386},[372,684,685],{"class":421},"bg-blue-500",[372,687,425],{"class":386},[372,689,454],{"class":386},[372,691,692,695,697,699,702,704],{"class":374,"line":463},[372,693,694],{"class":403},"      buffered",[372,696,407],{"class":386},[372,698,418],{"class":386},[372,700,701],{"class":421},"bg-white/20",[372,703,425],{"class":386},[372,705,454],{"class":386},[372,707,709],{"class":374,"line":708},7,[372,710,711],{"class":386},"    },\n",[372,713,715],{"class":374,"line":714},8,[372,716,460],{"class":386},[372,718,720,722,724],{"class":374,"line":719},9,[372,721,466],{"class":386},[372,723,469],{"class":382},[372,725,472],{"class":386},[248,727,729],{"id":728},"interface","Interface",[363,731,733],{"className":365,"code":732,"language":367,"meta":368,"style":368},"interface ScenaVideoProgressProps {\n  size: ComponentSize;\n  hasBuffer: boolean;\n  aria: Partial\u003CComponentAriaProps>;\n  customThickness: Partial\u003CScenaVideoProgressComponentThickness>;\n  customClasses: Partial\u003CScenaVideoProgressComponentClasses>;\n  customStyles: Partial\u003CScenaVideoProgressComponentStyles>;\n}\n",[280,734,735,746,758,770,789,805,821,837],{"__ignoreMap":368},[372,736,737,740,744],{"class":374,"line":375},[372,738,728],{"class":739},"spNyl",[372,741,743],{"class":742},"sBMFI"," ScenaVideoProgressProps",[372,745,439],{"class":386},[372,747,748,751,753,756],{"class":374,"line":400},[372,749,750],{"class":403},"  size",[372,752,407],{"class":386},[372,754,755],{"class":742}," ComponentSize",[372,757,472],{"class":386},[372,759,760,763,765,768],{"class":374,"line":431},[372,761,762],{"class":403},"  hasBuffer",[372,764,407],{"class":386},[372,766,767],{"class":742}," boolean",[372,769,472],{"class":386},[372,771,772,775,777,780,783,786],{"class":374,"line":442},[372,773,774],{"class":403},"  aria",[372,776,407],{"class":386},[372,778,779],{"class":742}," Partial",[372,781,782],{"class":386},"\u003C",[372,784,785],{"class":742},"ComponentAriaProps",[372,787,788],{"class":386},">;\n",[372,790,791,794,796,798,800,803],{"class":374,"line":457},[372,792,793],{"class":403},"  customThickness",[372,795,407],{"class":386},[372,797,779],{"class":742},[372,799,782],{"class":386},[372,801,802],{"class":742},"ScenaVideoProgressComponentThickness",[372,804,788],{"class":386},[372,806,807,810,812,814,816,819],{"class":374,"line":463},[372,808,809],{"class":403},"  customClasses",[372,811,407],{"class":386},[372,813,779],{"class":742},[372,815,782],{"class":386},[372,817,818],{"class":742},"ScenaVideoProgressComponentClasses",[372,820,788],{"class":386},[372,822,823,826,828,830,832,835],{"class":374,"line":708},[372,824,825],{"class":403},"  customStyles",[372,827,407],{"class":386},[372,829,779],{"class":742},[372,831,782],{"class":386},[372,833,834],{"class":742},"ScenaVideoProgressComponentStyles",[372,836,788],{"class":386},[372,838,839],{"class":374,"line":714},[372,840,841],{"class":386},"}\n",[843,844,845],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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}",{"title":368,"searchDepth":375,"depth":400,"links":847},[848,849,850,851,852,853],{"id":250,"depth":400,"text":251},{"id":353,"depth":400,"text":354},{"id":475,"depth":400,"text":476},{"id":532,"depth":400,"text":533},{"id":599,"depth":400,"text":600},{"id":728,"depth":400,"text":729},"Configure or disable the video progress bar.","md",null,{},true,{"title":81,"description":854},"bC44uCJftZI5GeXRKOnu7rqEUbUAYXAFcEda8976MoM",[862,864],{"title":77,"path":78,"stem":79,"description":863,"children":-1},"Configure or disable the loading indicator shown during video buffering.",{"title":85,"path":86,"stem":87,"description":865,"children":-1},"Configure or disable the volume control component.",1777984320968]