[{"data":1,"prerenderedAt":894},["ShallowReactive",2],{"navigation":3,"/examples/loop-segment":238,"/examples/loop-segment-surround":889},[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":210,"body":240,"description":883,"extension":884,"links":885,"meta":886,"navigation":373,"path":211,"seo":887,"stem":212,"__hash__":888},"docs/08.examples/7.loop-segment.md",{"type":241,"value":242,"toc":879},"minimark",[243,256,261,270,273,861,875],[244,245,246,247,251,252,255],"p",{},"By default the widget loops the full video. This example constrains playback to a specific segment — when ",[248,249,250],"code",{},"currentTime"," reaches the defined end point, ",[248,253,254],{},"seek()"," resets it back to the start. This is useful for product demos, tutorial highlights, or any scenario where only a portion of the video is relevant.",[257,258,260],"h2",{"id":259},"demo","Demo",[262,263,264],"scena-container",{},[265,266],"scena-component-loop-segment",{":config":267,":segmentEnd":268,":segmentStart":269},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":false,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"}}","8","2",[257,271,272],{"id":248},"Code",[274,275,281],"pre",{"className":276,"code":277,"filename":278,"language":279,"meta":280,"style":280},"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  ComponentPlacement,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst SEGMENT_START = 2;\nconst SEGMENT_END = 8;\n\nconst scena = useScena();\n\nconst instance = await scena.mount(\n  {\n    video: {\n      src: '/video.mp4',\n      startTime: SEGMENT_START,\n      loop: false,\n      muted: true,\n    },\n    size: ComponentSize.MD,\n    shape: ComponentShape.CIRCLE,\n    container: {\n      position: ComponentPosition.ABSOLUTE,\n      placement: ComponentPlacement.MIDDLE_CENTER,\n    },\n    ctaButton: false,\n    closeButton: false,\n  },\n  document.getElementById('target'),\n);\n\ninstance.api.events.on(ScenaEvent.ON_VIDEO_TIME_UPDATE, () => {\n  const { currentTime } = instance.api.controller;\n\n  if (currentTime >= SEGMENT_END) {\n    instance.api.controller.seek(SEGMENT_START);\n  }\n});\n","main.ts","ts","",[248,282,283,296,306,314,322,330,338,346,368,375,389,394,413,428,433,452,457,482,488,500,517,530,544,557,563,581,599,609,627,645,650,662,674,680,706,713,718,758,790,795,818,846,852],{"__ignoreMap":280},[284,285,288,292],"span",{"class":286,"line":287},"line",1,[284,289,291],{"class":290},"s7zQu","import",[284,293,295],{"class":294},"sMK4o"," {\n",[284,297,299,303],{"class":286,"line":298},2,[284,300,302],{"class":301},"sTEyZ","  useScena",[284,304,305],{"class":294},",\n",[284,307,309,312],{"class":286,"line":308},3,[284,310,311],{"class":301},"  ScenaEvent",[284,313,305],{"class":294},[284,315,317,320],{"class":286,"line":316},4,[284,318,319],{"class":301},"  ComponentSize",[284,321,305],{"class":294},[284,323,325,328],{"class":286,"line":324},5,[284,326,327],{"class":301},"  ComponentShape",[284,329,305],{"class":294},[284,331,333,336],{"class":286,"line":332},6,[284,334,335],{"class":301},"  ComponentPosition",[284,337,305],{"class":294},[284,339,341,344],{"class":286,"line":340},7,[284,342,343],{"class":301},"  ComponentPlacement",[284,345,305],{"class":294},[284,347,349,352,355,358,362,365],{"class":286,"line":348},8,[284,350,351],{"class":294},"}",[284,353,354],{"class":290}," from",[284,356,357],{"class":294}," '",[284,359,361],{"class":360},"sfazB","@retoo/scena",[284,363,364],{"class":294},"'",[284,366,367],{"class":294},";\n",[284,369,371],{"class":286,"line":370},9,[284,372,374],{"emptyLinePlaceholder":373},true,"\n",[284,376,378,380,382,385,387],{"class":286,"line":377},10,[284,379,291],{"class":290},[284,381,357],{"class":294},[284,383,384],{"class":360},"@retoo/scena/styles",[284,386,364],{"class":294},[284,388,367],{"class":294},[284,390,392],{"class":286,"line":391},11,[284,393,374],{"emptyLinePlaceholder":373},[284,395,397,401,404,407,411],{"class":286,"line":396},12,[284,398,400],{"class":399},"spNyl","const",[284,402,403],{"class":301}," SEGMENT_START ",[284,405,406],{"class":294},"=",[284,408,410],{"class":409},"sbssI"," 2",[284,412,367],{"class":294},[284,414,416,418,421,423,426],{"class":286,"line":415},13,[284,417,400],{"class":399},[284,419,420],{"class":301}," SEGMENT_END ",[284,422,406],{"class":294},[284,424,425],{"class":409}," 8",[284,427,367],{"class":294},[284,429,431],{"class":286,"line":430},14,[284,432,374],{"emptyLinePlaceholder":373},[284,434,436,438,441,443,447,450],{"class":286,"line":435},15,[284,437,400],{"class":399},[284,439,440],{"class":301}," scena ",[284,442,406],{"class":294},[284,444,446],{"class":445},"s2Zo4"," useScena",[284,448,449],{"class":301},"()",[284,451,367],{"class":294},[284,453,455],{"class":286,"line":454},16,[284,456,374],{"emptyLinePlaceholder":373},[284,458,460,462,465,467,470,473,476,479],{"class":286,"line":459},17,[284,461,400],{"class":399},[284,463,464],{"class":301}," instance ",[284,466,406],{"class":294},[284,468,469],{"class":290}," await",[284,471,472],{"class":301}," scena",[284,474,475],{"class":294},".",[284,477,478],{"class":445},"mount",[284,480,481],{"class":301},"(\n",[284,483,485],{"class":286,"line":484},18,[284,486,487],{"class":294},"  {\n",[284,489,491,495,498],{"class":286,"line":490},19,[284,492,494],{"class":493},"swJcz","    video",[284,496,497],{"class":294},":",[284,499,295],{"class":294},[284,501,503,506,508,510,513,515],{"class":286,"line":502},20,[284,504,505],{"class":493},"      src",[284,507,497],{"class":294},[284,509,357],{"class":294},[284,511,512],{"class":360},"/video.mp4",[284,514,364],{"class":294},[284,516,305],{"class":294},[284,518,520,523,525,528],{"class":286,"line":519},21,[284,521,522],{"class":493},"      startTime",[284,524,497],{"class":294},[284,526,527],{"class":301}," SEGMENT_START",[284,529,305],{"class":294},[284,531,533,536,538,542],{"class":286,"line":532},22,[284,534,535],{"class":493},"      loop",[284,537,497],{"class":294},[284,539,541],{"class":540},"sfNiH"," false",[284,543,305],{"class":294},[284,545,547,550,552,555],{"class":286,"line":546},23,[284,548,549],{"class":493},"      muted",[284,551,497],{"class":294},[284,553,554],{"class":540}," true",[284,556,305],{"class":294},[284,558,560],{"class":286,"line":559},24,[284,561,562],{"class":294},"    },\n",[284,564,566,569,571,574,576,579],{"class":286,"line":565},25,[284,567,568],{"class":493},"    size",[284,570,497],{"class":294},[284,572,573],{"class":301}," ComponentSize",[284,575,475],{"class":294},[284,577,578],{"class":301},"MD",[284,580,305],{"class":294},[284,582,584,587,589,592,594,597],{"class":286,"line":583},26,[284,585,586],{"class":493},"    shape",[284,588,497],{"class":294},[284,590,591],{"class":301}," ComponentShape",[284,593,475],{"class":294},[284,595,596],{"class":301},"CIRCLE",[284,598,305],{"class":294},[284,600,602,605,607],{"class":286,"line":601},27,[284,603,604],{"class":493},"    container",[284,606,497],{"class":294},[284,608,295],{"class":294},[284,610,612,615,617,620,622,625],{"class":286,"line":611},28,[284,613,614],{"class":493},"      position",[284,616,497],{"class":294},[284,618,619],{"class":301}," ComponentPosition",[284,621,475],{"class":294},[284,623,624],{"class":301},"ABSOLUTE",[284,626,305],{"class":294},[284,628,630,633,635,638,640,643],{"class":286,"line":629},29,[284,631,632],{"class":493},"      placement",[284,634,497],{"class":294},[284,636,637],{"class":301}," ComponentPlacement",[284,639,475],{"class":294},[284,641,642],{"class":301},"MIDDLE_CENTER",[284,644,305],{"class":294},[284,646,648],{"class":286,"line":647},30,[284,649,562],{"class":294},[284,651,653,656,658,660],{"class":286,"line":652},31,[284,654,655],{"class":493},"    ctaButton",[284,657,497],{"class":294},[284,659,541],{"class":540},[284,661,305],{"class":294},[284,663,665,668,670,672],{"class":286,"line":664},32,[284,666,667],{"class":493},"    closeButton",[284,669,497],{"class":294},[284,671,541],{"class":540},[284,673,305],{"class":294},[284,675,677],{"class":286,"line":676},33,[284,678,679],{"class":294},"  },\n",[284,681,683,686,688,691,694,696,699,701,704],{"class":286,"line":682},34,[284,684,685],{"class":301},"  document",[284,687,475],{"class":294},[284,689,690],{"class":445},"getElementById",[284,692,693],{"class":301},"(",[284,695,364],{"class":294},[284,697,698],{"class":360},"target",[284,700,364],{"class":294},[284,702,703],{"class":301},")",[284,705,305],{"class":294},[284,707,709,711],{"class":286,"line":708},35,[284,710,703],{"class":301},[284,712,367],{"class":294},[284,714,716],{"class":286,"line":715},36,[284,717,374],{"emptyLinePlaceholder":373},[284,719,721,724,726,729,731,734,736,739,742,744,747,750,753,756],{"class":286,"line":720},37,[284,722,723],{"class":301},"instance",[284,725,475],{"class":294},[284,727,728],{"class":301},"api",[284,730,475],{"class":294},[284,732,733],{"class":301},"events",[284,735,475],{"class":294},[284,737,738],{"class":445},"on",[284,740,741],{"class":301},"(ScenaEvent",[284,743,475],{"class":294},[284,745,746],{"class":301},"ON_VIDEO_TIME_UPDATE",[284,748,749],{"class":294},",",[284,751,752],{"class":294}," ()",[284,754,755],{"class":399}," =>",[284,757,295],{"class":294},[284,759,761,764,767,770,773,776,779,781,783,785,788],{"class":286,"line":760},38,[284,762,763],{"class":399},"  const",[284,765,766],{"class":294}," {",[284,768,769],{"class":301}," currentTime",[284,771,772],{"class":294}," }",[284,774,775],{"class":294}," =",[284,777,778],{"class":301}," instance",[284,780,475],{"class":294},[284,782,728],{"class":301},[284,784,475],{"class":294},[284,786,787],{"class":301},"controller",[284,789,367],{"class":294},[284,791,793],{"class":286,"line":792},39,[284,794,374],{"emptyLinePlaceholder":373},[284,796,798,801,804,806,809,812,815],{"class":286,"line":797},40,[284,799,800],{"class":290},"  if",[284,802,803],{"class":493}," (",[284,805,250],{"class":301},[284,807,808],{"class":294}," >=",[284,810,811],{"class":301}," SEGMENT_END",[284,813,814],{"class":493},") ",[284,816,817],{"class":294},"{\n",[284,819,821,824,826,828,830,832,834,837,839,842,844],{"class":286,"line":820},41,[284,822,823],{"class":301},"    instance",[284,825,475],{"class":294},[284,827,728],{"class":301},[284,829,475],{"class":294},[284,831,787],{"class":301},[284,833,475],{"class":294},[284,835,836],{"class":445},"seek",[284,838,693],{"class":493},[284,840,841],{"class":301},"SEGMENT_START",[284,843,703],{"class":493},[284,845,367],{"class":294},[284,847,849],{"class":286,"line":848},42,[284,850,851],{"class":294},"  }\n",[284,853,855,857,859],{"class":286,"line":854},43,[284,856,351],{"class":294},[284,858,703],{"class":301},[284,860,367],{"class":294},[862,863,865],"callout",{"icon":864,"to":120},"i-lucide-arrow-right",[244,866,867,868,870,871,475],{},"Full controller API including ",[248,869,254],{}," — see ",[872,873,874],"strong",{},"Instance API",[876,877,878],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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":280,"searchDepth":287,"depth":298,"links":880},[881,882],{"id":259,"depth":298,"text":260},{"id":248,"depth":298,"text":272},"Loop playback between two timestamps by seeking back to the start point when the end is reached.","md",null,{},{"title":210,"description":883},"H2qUjsirAFJe59KzNkaYq5oAYg9H6vUY3fVe2DlKCrw",[890,892],{"title":206,"path":207,"stem":208,"description":891,"children":-1},"Show a contextual overlay at a specific point in the video using playback time events.",{"title":214,"path":215,"stem":216,"description":893,"children":-1},"Collect seek positions and visualize which parts of the video users rewatch most.",1777984324717]