[{"data":1,"prerenderedAt":812},["ShallowReactive",2],{"navigation":3,"/components/video-volume":238,"/components/video-volume-surround":807},[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":85,"body":240,"description":800,"extension":801,"links":802,"meta":803,"navigation":804,"path":86,"seo":805,"stem":87,"__hash__":806},"docs/03.components/7.video-volume.md",{"type":241,"value":242,"toc":793},"minimark",[243,252,257,325,329,336,503,507,512,572,576,591,701,705,789],[244,245,246,247,251],"p",{},"Volume control renders a mute/unmute toggle on the widget. It reflects the current mute state and lets users toggle audio without any additional configuration. Pass ",[248,249,250],"code",{},"false"," to remove it if your use case doesn't require audio controls.",[253,254,256],"h2",{"id":255},"config","Config",[258,259,260,276],"table",{},[261,262,263],"thead",{},[264,265,266,270,273],"tr",{},[267,268,269],"th",{},"Property",[267,271,272],{},"Type",[267,274,275],{},"Description",[277,278,279,295,310],"tbody",{},[264,280,281,287,292],{},[282,283,284],"td",{},[248,285,286],{},"aria",[282,288,289],{},[248,290,291],{},"Partial\u003CScenaVideoVolumeComponentAria>",[282,293,294],{},"ARIA attributes",[264,296,297,302,307],{},[282,298,299],{},[248,300,301],{},"customClasses",[282,303,304],{},[248,305,306],{},"Partial\u003CScenaVideoVolumeComponentClasses>",[282,308,309],{},"Custom CSS classes",[264,311,312,317,322],{},[282,313,314],{},[248,315,316],{},"customStyles",[282,318,319],{},[248,320,321],{},"Partial\u003CScenaVideoVolumeComponentStyles>",[282,323,324],{},"Custom inline styles",[253,326,328],{"id":327},"example","Example",[330,331,332],"scena-container",{},[333,334],"scena-component",{":config":335},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"}}",[337,338,343],"pre",{"className":339,"code":340,"language":341,"meta":342,"style":342},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  videoVolume: {\n    aria: {\n      mute: { 'aria-label': 'Mute' },\n      unmute: { 'aria-label': 'Unmute' },\n    },\n  },\n});\n","ts","",[248,344,345,372,403,414,424,452,479,485,491],{"__ignoreMap":342},[346,347,350,354,358,362,366,369],"span",{"class":348,"line":349},"line",1,[346,351,353],{"class":352},"s7zQu","await",[346,355,357],{"class":356},"sTEyZ"," scena",[346,359,361],{"class":360},"sMK4o",".",[346,363,365],{"class":364},"s2Zo4","mount",[346,367,368],{"class":356},"(",[346,370,371],{"class":360},"{\n",[346,373,375,379,382,385,388,390,393,397,400],{"class":348,"line":374},2,[346,376,378],{"class":377},"swJcz","  video",[346,380,381],{"class":360},":",[346,383,384],{"class":360}," {",[346,386,387],{"class":377}," src",[346,389,381],{"class":360},[346,391,392],{"class":360}," '",[346,394,396],{"class":395},"sfazB","/video.mp4",[346,398,399],{"class":360},"'",[346,401,402],{"class":360}," },\n",[346,404,406,409,411],{"class":348,"line":405},3,[346,407,408],{"class":377},"  videoVolume",[346,410,381],{"class":360},[346,412,413],{"class":360}," {\n",[346,415,417,420,422],{"class":348,"line":416},4,[346,418,419],{"class":377},"    aria",[346,421,381],{"class":360},[346,423,413],{"class":360},[346,425,427,430,432,434,436,439,441,443,445,448,450],{"class":348,"line":426},5,[346,428,429],{"class":377},"      mute",[346,431,381],{"class":360},[346,433,384],{"class":360},[346,435,392],{"class":360},[346,437,438],{"class":377},"aria-label",[346,440,399],{"class":360},[346,442,381],{"class":360},[346,444,392],{"class":360},[346,446,447],{"class":395},"Mute",[346,449,399],{"class":360},[346,451,402],{"class":360},[346,453,455,458,460,462,464,466,468,470,472,475,477],{"class":348,"line":454},6,[346,456,457],{"class":377},"      unmute",[346,459,381],{"class":360},[346,461,384],{"class":360},[346,463,392],{"class":360},[346,465,438],{"class":377},[346,467,399],{"class":360},[346,469,381],{"class":360},[346,471,392],{"class":360},[346,473,474],{"class":395},"Unmute",[346,476,399],{"class":360},[346,478,402],{"class":360},[346,480,482],{"class":348,"line":481},7,[346,483,484],{"class":360},"    },\n",[346,486,488],{"class":348,"line":487},8,[346,489,490],{"class":360},"  },\n",[346,492,494,497,500],{"class":348,"line":493},9,[346,495,496],{"class":360},"}",[346,498,499],{"class":356},")",[346,501,502],{"class":360},";\n",[253,504,506],{"id":505},"disabling","Disabling",[330,508,509],{},[333,510],{":config":511},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"videoVolume\":false}",[337,513,515],{"className":339,"code":514,"language":341,"meta":342,"style":342},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoVolume: false,\n});\n",[248,516,517,531,551,564],{"__ignoreMap":342},[346,518,519,521,523,525,527,529],{"class":348,"line":349},[346,520,353],{"class":352},[346,522,357],{"class":356},[346,524,361],{"class":360},[346,526,365],{"class":364},[346,528,368],{"class":356},[346,530,371],{"class":360},[346,532,533,535,537,539,541,543,545,547,549],{"class":348,"line":374},[346,534,378],{"class":377},[346,536,381],{"class":360},[346,538,384],{"class":360},[346,540,387],{"class":377},[346,542,381],{"class":360},[346,544,392],{"class":360},[346,546,396],{"class":395},[346,548,399],{"class":360},[346,550,402],{"class":360},[346,552,553,555,557,561],{"class":348,"line":405},[346,554,408],{"class":377},[346,556,381],{"class":360},[346,558,560],{"class":559},"sfNiH"," false",[346,562,563],{"class":360},",\n",[346,565,566,568,570],{"class":348,"line":416},[346,567,496],{"class":360},[346,569,499],{"class":356},[346,571,502],{"class":360},[253,573,575],{"id":574},"customization","Customization",[244,577,578,579,582,583,586,587,590],{},"The volume component accepts ",[248,580,581],{},"root",", ",[248,584,585],{},"mute",", and ",[248,588,589],{},"unmute"," as target keys:",[337,592,594],{"className":339,"code":593,"language":341,"meta":342,"style":342},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoVolume: {\n    customClasses: {\n      root: 'my-volume-control',\n      mute: { icon: 'text-white' },\n    },\n  },\n});\n",[248,595,596,610,630,638,647,663,685,689,693],{"__ignoreMap":342},[346,597,598,600,602,604,606,608],{"class":348,"line":349},[346,599,353],{"class":352},[346,601,357],{"class":356},[346,603,361],{"class":360},[346,605,365],{"class":364},[346,607,368],{"class":356},[346,609,371],{"class":360},[346,611,612,614,616,618,620,622,624,626,628],{"class":348,"line":374},[346,613,378],{"class":377},[346,615,381],{"class":360},[346,617,384],{"class":360},[346,619,387],{"class":377},[346,621,381],{"class":360},[346,623,392],{"class":360},[346,625,396],{"class":395},[346,627,399],{"class":360},[346,629,402],{"class":360},[346,631,632,634,636],{"class":348,"line":405},[346,633,408],{"class":377},[346,635,381],{"class":360},[346,637,413],{"class":360},[346,639,640,643,645],{"class":348,"line":416},[346,641,642],{"class":377},"    customClasses",[346,644,381],{"class":360},[346,646,413],{"class":360},[346,648,649,652,654,656,659,661],{"class":348,"line":426},[346,650,651],{"class":377},"      root",[346,653,381],{"class":360},[346,655,392],{"class":360},[346,657,658],{"class":395},"my-volume-control",[346,660,399],{"class":360},[346,662,563],{"class":360},[346,664,665,667,669,671,674,676,678,681,683],{"class":348,"line":454},[346,666,429],{"class":377},[346,668,381],{"class":360},[346,670,384],{"class":360},[346,672,673],{"class":377}," icon",[346,675,381],{"class":360},[346,677,392],{"class":360},[346,679,680],{"class":395},"text-white",[346,682,399],{"class":360},[346,684,402],{"class":360},[346,686,687],{"class":348,"line":481},[346,688,484],{"class":360},[346,690,691],{"class":348,"line":487},[346,692,490],{"class":360},[346,694,695,697,699],{"class":348,"line":493},[346,696,496],{"class":360},[346,698,499],{"class":356},[346,700,502],{"class":360},[253,702,704],{"id":703},"interface","Interface",[337,706,708],{"className":339,"code":707,"language":341,"meta":342,"style":342},"interface ScenaVideoVolumeProps {\n  size: ComponentSize;\n  aria: Partial\u003CScenaVideoVolumeComponentAria>;\n  customClasses: Partial\u003CScenaVideoVolumeComponentClasses>;\n  customStyles: Partial\u003CScenaVideoVolumeComponentStyles>;\n}\n",[248,709,710,721,733,752,768,784],{"__ignoreMap":342},[346,711,712,715,719],{"class":348,"line":349},[346,713,703],{"class":714},"spNyl",[346,716,718],{"class":717},"sBMFI"," ScenaVideoVolumeProps",[346,720,413],{"class":360},[346,722,723,726,728,731],{"class":348,"line":374},[346,724,725],{"class":377},"  size",[346,727,381],{"class":360},[346,729,730],{"class":717}," ComponentSize",[346,732,502],{"class":360},[346,734,735,738,740,743,746,749],{"class":348,"line":405},[346,736,737],{"class":377},"  aria",[346,739,381],{"class":360},[346,741,742],{"class":717}," Partial",[346,744,745],{"class":360},"\u003C",[346,747,748],{"class":717},"ScenaVideoVolumeComponentAria",[346,750,751],{"class":360},">;\n",[346,753,754,757,759,761,763,766],{"class":348,"line":416},[346,755,756],{"class":377},"  customClasses",[346,758,381],{"class":360},[346,760,742],{"class":717},[346,762,745],{"class":360},[346,764,765],{"class":717},"ScenaVideoVolumeComponentClasses",[346,767,751],{"class":360},[346,769,770,773,775,777,779,782],{"class":348,"line":426},[346,771,772],{"class":377},"  customStyles",[346,774,381],{"class":360},[346,776,742],{"class":717},[346,778,745],{"class":360},[346,780,781],{"class":717},"ScenaVideoVolumeComponentStyles",[346,783,751],{"class":360},[346,785,786],{"class":348,"line":454},[346,787,788],{"class":360},"}\n",[790,791,792],"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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":342,"searchDepth":349,"depth":374,"links":794},[795,796,797,798,799],{"id":255,"depth":374,"text":256},{"id":327,"depth":374,"text":328},{"id":505,"depth":374,"text":506},{"id":574,"depth":374,"text":575},{"id":703,"depth":374,"text":704},"Configure or disable the volume control component.","md",null,{},true,{"title":85,"description":800},"Ud9YwWDI23JD_xLUuv3Jts20srK49hi7rZz-ufNgGjM",[808,810],{"title":81,"path":82,"stem":83,"description":809,"children":-1},"Configure or disable the video progress bar.",{"title":94,"path":95,"stem":96,"description":811,"children":-1},"Configure preview mode with temporary visual overrides before the user interacts with the widget.",1777984321201]