https://www.bike-magazin.de/_next/static/chunks/12957.69274d70a1862ac9.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[12957],{11260:(e,t,r)=>{r.d(t,{Q:()=>u});var n=r(6029),o=r(55729),i=r(6772),a=r.n(i),l=r(98681);let s="dxp-tv-app-fullscreen-chrome",c=`
2body .bplr-fs {
3    --dxp-app-inset-top: max(env(safe-area-inset-top), 54px);
4    --dxp-app-inset-bottom: calc(max(env(safe-area-inset-bottom), 34px) + 68px);
5}
6@media (orientation: landscape) {
7    body .bplr-fs {
8        --dxp-app-inset-top: max(env(safe-area-inset-top), 0px);
9    }
10}
11body .bplr-fs .bplr-holder.bplr-holder {
12    top: var(--dxp-app-inset-top) !important;
13    bottom: var(--dxp-app-inset-bottom) !important;
14    left: max(env(safe-area-inset-left), 0px) !important;
15    right: max(env(safe-area-inset-right), 0px) !important;
16    width: auto !important;
17    height: auto !important;
18}
19`,u=({videoId:e,videoUrl:t,playerId:r,video:i,className:u="",autoplay:d=!1,muted:p=!0,videoSource:f="hd",onReady:h,onEnded:m,onTimeUpdate:y,onPause:v})=>{let w=(0,o.useId)().replace(/:/g,""),x=(0,o.useRef)(`tv-${w}`),g=(0,o.useRef)(!1),b=(0,o.useRef)(h),j=(0,o.useRef)(m),k=(0,o.useRef)(y),E=(0,o.useRef)(v),N=(0,o.useRef)(i),R=(0,o.useRef)(!1),S=(0,o.useRef)(0),C=(0,o.useRef)(0);return((0,o.useEffect)(()=>{N.current=i},[i]),(0,o.useEffect)(()=>{b.current=h},[h]),(0,o.useEffect)(()=>{j.current=m},[m]),(0,o.useEffect)(()=>{k.current=y},[y]),(0,o.useEffect)(()=>{E.current=v},[v]),(0,o.useEffect)(()=>()=>{try{"function"==typeof window.$bp&&g.current&&window.$bp().destroy(!0)}catch(e){}g.current=!1},[]),(0,o.useEffect)(()=>{if(!e||!r||!N.current?.id)return;let t=x.current;return R.current=!1,S.current=0,C.current=0,(0,l.H9)(t,N.current,document.getElementById(t)),()=>{R.current&&(R.current=!1,(0,l.jF)(t,"pause",S.current))}},[e,r]),(0,o.useEffect)(()=>{if(!e||!r)return;let n=x.current;if(g.current&&t&&"function"==typeof window.$bp)try{let e=window.$bp();if(e&&"function"==typeof e.src){let r=null;try{"function"==typeof e.muted&&(r=e.muted())}catch(e){}if(console.log(`[TargetVideoPlayer] src() — divId=${n} newVideoUrl=${t} preserveMuted=${r}`),e.src({src:t,type:"video/mp4"}),null!==r){let t=!1,n=()=>{if(!t)try{"function"==typeof e.muted&&(e.muted()!==r&&e.muted(r),t=!0)}catch(e){}};if("function"==typeof e.one)try{e.one("loadedmetadata",n),e.one("canplay",n),e.one("playing",n)}catch(e){}[200,500,1e3,1800].forEach(e=>{setTimeout(n,e)})}try{let t=e.play?.();t&&"function"==typeof t.catch&&t.catch(()=>{})}catch(e){}return}}catch(e){}let o={id:String(r),video:String(e),autoplay:d,autoplay_desktop:d,muted:p};f&&(o.video_source=String(f));let i=()=>{try{if(window.$bp){let e=window.$bp(),t=x.current,r=()=>{try{let t=Number(e.currentTime());return Number.isFinite(t)?t:null}catch(e){return null}},o=e=>{R.current||(R.current=!0,S.current=e,(0,l.jF)(t,"play",e))},i=(e,r)=>{R.current&&(R.current=!1,S.current=r,(0,l.jF)(t,e,r))};try{e.on("play",()=>o(r()??0))}catch(e){}if(e.on("ended",()=>{i("end",r()??S.current),j.current?.()}),e.on("pause",()=>{i("pause",r()??S.current),E.current?.()}),e.on("timeupdate",()=>{let n=r();if(null===n)return;let i=null;try{i=e.paused?.()}catch(e){}!1===i&&o(n);let a=Date.now();R.current&&Math.abs(n-S.current)>=5&&a-C.current>=2e3&&(S.current=n,C.current=a,(0,l.jF)(t,"updateCurrentTime",n));try{k.current?.(n)}catch(e){}}),d){let t=()=>{try{let t=document.getElementById(n)?.querySelector?.("video");if(t&&!t.hasAttribute("playsinline")&&(t.playsInline=!0,t.setAttribute("playsinline",""),t.setAttribute("webkit-playsinline","")),e.paused?.()!==!1){let t=e.play?.();t&&"function"==typeof t.catch&&t.catch(()=>{})}}catch(e){}};[0,250,500,800,1200,1800,2500].forEach(e=>{setTimeout(t,e)})}}}catch(e){}b.current?.()},a="function"==typeof window.$bp;console.log(`[TargetVideoPlayer] mount — divId=${n} videoId=${e} playerId=${r} $bp=${a?"ready":"queued via _bp"} divInDom=${!!document.getElementById(n)}`),a?window.$bp(n,o,()=>{console.log(`[TargetVideoPlayer] onReady fired (direct) — divId=${n}`),i()}):(window._bp=window._bp||[],window._bp.push({div:n,obj:o,onReady:()=>{console.log(`[TargetVideoPlayer] onReady fired (from _bp queue) — divId=${n}`),i()}})),g.current=!0},[e,t,r,d,p,f]),(0,o.useEffect)(()=>

19{if(!(()=>{try{let e=new URLSearchParams(window.location.search).get("appchrome");if("1"===e)return!0;if("0"===e)return!1}catch(e){}try{let e=window.localStorage?.getItem?.("isApp");if(!e)return!1;return"ios"===e||/iPhone|iPod|iPad/.test(navigator.userAgent||"")}catch(e){return!1}})()||document.getElementById(s))return;let e=document.createElement("style");e.id=s,e.textContent=c,document.head.appendChild(e)},[]),e&&r)?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{id:x.current,className:u}),(0,n.jsx)(a(),{src:"https://player.target-video.com/player/build/targetvideo.min.js",strategy:"afterInteractive"})]}):null}},12957:(e,t,r)=>{r.d(t,{v:()=>x});var n=r(6029),o=r(95669),i=r.n(o),a=r(55729),l=r(56760),s=r(93462),c=r(72866),u=r(42691),d=r(43340),p=r(92818),f=r(11260),h=r(20502);s.A.use([c.A]);let m=({className:e})=>(0,n.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",className:e,stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:(0,n.jsx)("path",{d:"M6 6l12 12M6 18L18 6",strokeLinecap:"round"})}),y=({className:e})=>(0,n.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",className:e,stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:[(0,n.jsx)("path",{d:"M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7",strokeLinecap:"round",strokeLinejoin:"round"}),(0,n.jsx)("path",{d:"M16 6l-4-4-4 4",strokeLinecap:"round",strokeLinejoin:"round"}),(0,n.jsx)("path",{d:"M12 2v14",strokeLinecap:"round"})]}),v=()=>(0,n.jsxs)("svg",{viewBox:"0 0 64 36",preserveAspectRatio:"xMidYMid slice","aria-hidden":"true",className:"size-full bg-neutral-200 text-neutral-500",children:[(0,n.jsx)("polygon",{points:"6,30 22,12 38,30",fill:"currentColor"}),(0,n.jsx)("polygon",{points:"28,30 40,18 52,30",fill:"currentColor",opacity:"0.7"}),(0,n.jsx)("circle",{cx:"44",cy:"13",r:"3.5",fill:"currentColor"})]}),w=({video:e})=>(0,n.jsx)("div",{className:"relative size-full overflow-hidden bg-neutral-200",children:e.image?.src?(0,n.jsx)("img",{src:e.image.src,alt:e.image.alt||e.title,className:"absolute inset-0 size-full object-cover"}):(0,n.jsx)(v,{})}),x=({videos:e=h.GC,startIndex:t=0,visible:r=!1,onClose:o=()=>{}})=>{let s=(0,a.useRef)(null),c=(0,a.useRef)(),v=(0,a.useRef)(),x=(0,a.useRef)(null),[g,b]=(0,a.useState)(t),[j,k]=(0,a.useState)(r);r!==j&&(k(r),r&&g!==t&&b(t));let E=e?.length||0,N=e?.[g],[R,S]=(0,a.useState)(!1),C=(()=>{let[e,t]=(0,a.useState)(null);return(0,a.useEffect)(()=>{if(!window.visualViewport)return;let e=window.visualViewport,r=()=>t(e.height);return r(),e.addEventListener("resize",r),e.addEventListener("scroll",r),()=>{e.removeEventListener("resize",r),e.removeEventListener("scroll",r)}},[]),e})(),M="50822";(0,a.useEffect)(()=>{if(!r)return;let e=s.current;e&&e.activeIndex!==t&&e.slideTo(t,0)},[r,t]);let $=(0,a.useRef)(null),T=()=>{let e=s.current;if(e&&!e.destroyed){if(e.isEnd)return void o();e.slideNext(300,!0)}},I=()=>{let e=s.current;e&&!e.destroyed&&e.slidePrev(300,!0)};(0,a.useEffect)(()=>{if(!r)return;let e=e=>{"Escape"===e.key?o():"ArrowRight"===e.key?T():"ArrowLeft"===e.key&&I()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,o]);let L=(0,a.useRef)(null),P=(0,a.useRef)(!1),z=(0,a.useRef)(o);return((0,a.useEffect)(()=>{z.current=o},[o]),(0,a.useEffect)(()=>{if(!r)return;let t=e?.[g];if(!t?.link)return;L.current=window.location.href;try{window.history.pushState({...window.history.state||{},shortsModal:!0},"",t.link)}catch(e){}let n=e=>{if(P.current){P.current=!1;return}e.state?.shortsModal||z.current?.()};return window.addEventListener("popstate",n),()=>{if(window.removeEventListener("popstate",n),window.history.state?.shortsModal){P.current=!0;try{window.history.back()}catch(e){if(L.current)try{window.history.replaceState(null,"",L.current)}catch(e){}}}L.current=null}},[r]),(0,a.useEffect)(()=>{if(!r)return;let t=e?.[g];if(t?.link&&window.history.state?.shortsModal)try{window.history.replaceState({...window.history.state,shortsModal:!0},"",t.link)}catch(e){}},[r,g,e]),(0,a.useEffect)(()=>{if(!r)return;let e=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=e}},[r]),(0,a.useEffect)(()=>

19{if(!r||"u"<typeof document)return;let e=document.documentElement.style.backgroundColor,t=document.body.style.backgroundColor;return document.documentElement.style.backgroundColor="#333",document.body.style.backgroundColor="#333",()=>{document.documentElement.style.backgroundColor=e,document.body.style.backgroundColor=t}},[r]),r&&0!==E)?(0,l.createPortal)((0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i(),{children:(0,n.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1, viewport-fit=cover"},"viewport")}),(0,n.jsx)("div",{className:"shorts-modal fixed inset-x-0 top-0 z-overlay flex items-center justify-center bg-body-dark pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",style:{height:C?`${C}px`:"100dvh"},onMouseDown:e=>{e.target===e.currentTarget?x.current={x:e.clientX,y:e.clientY}:x.current=null},onMouseUp:e=>{let t=x.current;if(x.current=null,!t||e.target!==e.currentTarget)return;let r=Math.abs(e.clientX-t.x),n=Math.abs(e.clientY-t.y);r<5&&n<5&&o()},role:"dialog","aria-modal":"true","aria-label":e[g]?.title,children:(0,n.jsxs)("div",{onMouseDown:e=>e.stopPropagation(),onMouseUp:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),className:"relative size-full max-w-none md:h-[90vh] md:w-[calc(90vh*9/16)]",children:[(0,n.jsx)("div",{className:"absolute inset-0 overflow-hidden",children:(0,n.jsx)(u.R,{slidesPerView:1,spaceBetween:0,allowTouchMove:!0,onSwiper:e=>{s.current=e},onSlideChange:e=>b(e.activeIndex),onSlideChangeTransitionStart:()=>S(!0),onSlideChangeTransitionEnd:()=>S(!1),initialSlide:t,className:"size-full",children:e.map((e,t)=>(0,n.jsx)(d.q,{children:(0,n.jsx)(w,{video:e})},e.id||t))})}),N?.id&&M&&(0,n.jsx)("div",{className:`absolute inset-0 z-20 transition-opacity duration-200 ${R?"pointer-events-none opacity-0":"opacity-100"}`,onTouchStart:e=>{let t=e.touches?.[0];t&&($.current={x:t.clientX,y:t.clientY,time:Date.now()})},onTouchEnd:e=>{let t=$.current;if($.current=null,!t)return;let r=e.changedTouches?.[0];if(!r)return;let n=r.clientX-t.x,o=r.clientY-t.y,i=Date.now()-t.time;Math.abs(n)>50&&Math.abs(n)>2*Math.abs(o)&&i<600&&(n<0?T():I())},children:(0,n.jsx)(f.Q,{videoId:N.id,videoUrl:N.videoUrl,video:N,playerId:M,autoplay:!0,muted:!0,onEnded:T,className:"absolute inset-0 size-full"})}),(0,n.jsxs)("div",{className:"hidden md:block",children:[(0,n.jsx)(p.S,{navigationType:"prev",ref:c,onClick:T}),(0,n.jsx)(p.S,{navigationType:"next",ref:v,onClick:I})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-x-0 top-0 z-30 flex gap-1 p-3",children:e.map((e,t)=>(0,n.jsx)("div",{className:"h-0.5 flex-1 overflow-hidden bg-white/30",children:(0,n.jsx)("div",{className:"h-full bg-white",style:{width:t<=g?"100%":"0%"}})},t))}),(0,n.jsx)("div",{className:"pointer-events-none absolute left-4 right-24 top-6 z-30",children:(0,n.jsx)("h3",{className:"line-clamp-1 break-words font-serif text-base font-medium leading-snug text-white drop-shadow-md md:text-lg",children:e[g]?.title})}),(0,n.jsxs)("div",{className:"absolute right-3 top-6 z-30 flex items-center gap-3 text-white",children:[(0,n.jsx)("button",{type:"button",onClick:async t=>{t.stopPropagation();let r=(e=>

19{if(!e?.id)return null;if(e.link)return`${window.location.origin}${e.link}`;let t=new URL(window.location.href);return t.searchParams.set("shorts",String(e.id)),t.toString()})(e?.[g]);if(r)try{navigator.share&&navigator.canShare?.({url:r})?await navigator.share({url:r,title:e?.[g]?.title}):navigator.clipboard&&await navigator.clipboard.writeText(r)}catch(e){}},"aria-label":"Teilen",className:"hover:opacity-80",children:(0,n.jsx)(y,{className:"size-7"})}),(0,n.jsx)("button",{type:"button",onClick:e=>{e.stopPropagation(),o()},"aria-label":"Schlie\xdfen",className:"hover:opacity-80",children:(0,n.jsx)(m,{className:"size-7"})})]})]})})]}),document.body):null}}}]);