https://www.delius-klasing.de/_next/static/chunks/StructureVideoDetail.161a16b7f65e4090.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[11228,18156,23156,28232,66985,80961],{7880:(e,t,i)=>{i.r(t),i.d(t,{VideoDetail:()=>I,default:()=>_});var a=i(6029),r=i(75828),s=i.n(r),l=i(5700),n=i(55729),o=i(75399),d=i(66432),c=i(86049),m=i(78704),u=i(27404),h=i(25608),x=i(86013),k=i(12957),b=i(11260),p=i(52556),g=i(20502),f=i(42418),v=i.n(f),j=i(89895),y=i(29143);let w=/(https?:\/\/[^\s<>"']+[^\s<>"'.,;:!?)])/g,N=({isDarkMode:e})=>{let t=(0,l.c)("common"),i=async()=>{try{let e={url:window.location.href,title:document.title};navigator.share&&navigator.canShare?.(e)?await navigator.share(e):navigator.clipboard&&await navigator.clipboard.writeText(window.location.href)}catch(e){}};return(0,a.jsx)("button",{type:"button","aria-label":t("VIDEO_SHARE_LABEL"),onClick:i,className:s()("inline-flex size-11 items-center justify-center rounded border transition-colors",e?"border-white/30 text-white hover:bg-white/10":"border-skin-primary-light text-skin-primary-ultradark hover:bg-skin-primary-ultralight"),children:(0,a.jsx)(x.I,{iconName:"share",iconType:"outline",className:"size-5"})})},S=({isDarkMode:e,videoId:t,videoData:i})=>(0,a.jsxs)("div",{className:"flex items-center gap-3",children:[(0,a.jsx)(h.VideoRatingThumbs,{videoId:t,darkMode:e}),(0,a.jsx)(u.VideoBookmark,{videoId:t,videoData:i,darkMode:e}),(0,a.jsx)(N,{isDarkMode:e})]}),I=({video:e,description:t,mostViewedEntries:i,rubrikEntries:r,rubrikLabel:u,darkMode:h})=>{let x=(0,l.c)("common"),{darkMode:f}=(0,n.useContext)(o.N),N=(0,d.n)(),I=h??N?.darkMode??f,_=N?.video||e||g.ss,T=_?.description||t||"In diesem Video zeigen wir Schritt f\xfcr Schritt, wie der Palstek gelingt – der wichtigste Knoten an Bord. Vom ersten T\xf6rn bis zum sicheren Festmachen: kompakt erkl\xe4rt und sofort umsetzbar.",C=N?.rubrik==="shorts"||_?.rubrik==="shorts",[E,R]=(0,n.useState)(!1),V=C&&y.env.NEXT_PUBLIC_TARGET_VIDEO_SHORTS_PLAYER_ID||y.env.NEXT_PUBLIC_TARGET_VIDEO_PLAYER_ID,L=N?.mostViewed||i||g.Js,M=N?.moreFromRubrik||r||g.Js,[A,O]=(0,n.useState)(!1);(0,n.useEffect)(()=>{C&&O(!0)},[C]);let B=(0,n.useMemo)(()=>{if(!C)return[];let e=[],t=new Set;for(let i of(_?.id&&(e.push(_),t.add(String(_.id))),[...M?.items||[],...L?.items||[]])){let a=i?.id?String(i.id):null;!(!a||t.has(a))&&(i.rubrik&&"shorts"!==i.rubrik||(t.add(a),e.push(i)))}return e},[C,_,M,L]),D=N?.rubrik||null,z=N?.rubrikLabel||u||_?.rubrikLabel||"",P=[{title:"Video",contentfulLink:{__typename:"NavigationNode",slug:"video"}},...D&&z?[{title:z,contentfulLink:{__typename:"NavigationNode",slug:`video/${D}`}}]:[]],G=String(T).split("\n").map(e=>e.trim()).filter(Boolean);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"md:px-4",children:(0,a.jsxs)("div",{className:"mx-auto max-w-screen-xl px-4 md:px-0",children:[(0,a.jsx)(j.Breadcrumb,{breadcrumb:P,darkMode:I,className:"-mx-4 mb-3 md:mx-0"}),(0,a.jsx)("h1",{className:s()("mb-4 font-serif text-2xl font-bold leading-snug md:mb-6 md:text-4xl",I?"text-white":"text-skin-primary-ultradark"),children:_?.title}),E&&_?.id&&V?C?(0,a.jsx)("div",{className:"mx-auto w-full max-w-xs",children:(0,a.jsx)("div",{className:"relative aspect-[9/16] w-full overflow-hidden bg-black [&>*]:!rounded-none",children:(0,a.jsx)(b.Q,{videoId:_.id,video:_,playerId:V,autoplay:!0,muted:!1,className:"absolute inset-0 size-full"})})}):(0,a.jsx)("div",{className:"-ml-4 w-[calc(100%_+_2rem)] md:ml-0 md:w-full",children:(0,a.jsx)("div",{className:"relative aspect-video w-full overflow-hidden bg-black [&>*]:!rounded-none",children:(0,a.jsx)(b.Q,{videoId:_.id,video:_,playerId:V,autoplay:!0,muted:!1,className:"absolute inset-0 size-full"})})}):C?(0,a.jsx)("div",{className:"mx-auto w-full max-w-xs",children:(0,a.jsx)(p.VideoThumbnailCard,{..._,aspectRatio:"9:16",size:"large",darkMode:I,onClick:()=>R(!0)})}):(0,a.jsx)("div",{className:"-ml-4 w-[calc(100%_+_2rem)] md:ml-0 md:w-full",children:(0,a.jsx)(p.VideoThumbnailCard,{..._,aspectRatio:"16:9",size:"large",darkMode:I,onClick:()=>R(!0)})}),(0,a.jsx)("div",{className:s()("mt-4 md:mt-8",v().editorItem,I?"text-white":"text-skin-primary-ultradark"),children:G.map((e,t)=>(0,a.jsx)("p",{children:String(e).split(w).map((e,t)=>t%2==1?(0,a.jsx)("a",{href:e,className:"!text-current underline hover:no-underline",children:e},t):e)},t))}),(0,a.jsx)("div",{className:"mt-4 md:mt-8",children:(0,a.jsx)(S,{isDarkMode:I,videoId:_?.id,videoData:_})}),(0,a.jsx)("div",{className:"mt-6 md:hidden",children:(0,a.jsx)(c.Ad,{ad:"rectangle",mobileOnly:!0})})]})}),(0,a.jsx)("div",{className:"mt-8 md:mt-16",children:(0,a.jsx)(m.VideoGrid,{title:x("VIDEO_DETAIL_MOST_VIEWED"),entries:L,initialCount:C?5:3,showLoadMore:!1,aspectRatio:C?"9:16":void 0,emitJsonLd:!1,darkMode:I})}),(0,a.jsx)("div",{className:"mt-8 md:mt-16",children:(0,a.jsx)(m.VideoGrid,{title:x("VIDEO_DETAIL_MORE_FROM_RUBRIC",{rubrik:z||"Video"}),entries:M,initialCount:C?5:3,showLoadMore:!1,aspectRatio:C?"9:16":void 0,emitJsonLd:!1,darkMode:I})}),C&&B.length>0&&(0,a.jsx)(k.v,{videos:B,startIndex:0,visible:A,onClose:()=>O(!1)})]})},_=I},25608:(e,t,i)=>{i.r(t),i.d(t,{VideoRatingThumbs:()=>u,default:()=>h});var a=i(6029),r=i(75828),s=i.n(r),l=i(5700),n=i(55729),o=i(683),d=i(26898),

1c=i(86013),m=i(80523);let u=({videoId:e,darkMode:t=!0,className:i=""})=>{let r=(0,l.c)("common"),[u,h]=(0,n.useState)(null),[x,k]=(0,n.useState)(!1),[b,p]=(0,n.useState)(!1),{isReady:g,isAuthorized:f,signIn:v}=(0,d.A)();if((0,n.useEffect)(()=>{if(!e||!f)return;let t=(0,o.getActive)()?.id;t&&(async()=>{try{let i=await fetch(`/api/videoReaction/getReaction?videoId=${encodeURIComponent(e)}&portal=${t}`),a=await i.json();i.ok&&a.reaction&&h(a.reaction)}catch(e){console.error("[VideoRatingThumbs] load failed:",e)}})()},[e,f]),!e)return null;let j=async t=>{if(x)return;if(!g||!f)return void p(!0);let i=(0,o.getActive)()?.id;if(!i)return;let a=u===t?null:t;k(!0),h(a);try{let t=await fetch("/api/videoReaction/setReaction",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({videoId:e,reaction:a,portal:i})});if(!t.ok){h(u);let e=await t.json().catch(()=>({}));console.error("[VideoRatingThumbs] set failed:",e.message||t.status)}}catch(e){h(u),console.error("[VideoRatingThumbs] set failed:",e)}finally{k(!1)}},y=e=>s()("inline-flex size-11 items-center justify-center rounded border transition-colors",t?"border-white/30 text-white hover:bg-white/10":"border-skin-primary-light text-skin-primary-ultradark hover:bg-skin-primary-ultralight",{"opacity-50":x},e&&(t?"bg-white/15":"bg-skin-primary-ultralight"));return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:s()("flex items-center gap-3",i),children:[(0,a.jsx)("button",{type:"button","aria-label":r("RATING_THUMBS_LIKE"),"aria-pressed":"like"===u,onClick:()=>j("like"),disabled:x,className:y("like"===u),children:(0,a.jsx)(c.I,{iconName:"thumbUp",iconType:"like"===u?"fill":"outline",className:"size-5"})}),(0,a.jsx)("button",{type:"button","aria-label":r("RATING_THUMBS_DISLIKE"),"aria-pressed":"dislike"===u,onClick:()=>j("dislike"),disabled:x,className:y("dislike"===u),children:(0,a.jsx)(c.I,{iconName:"thumbDown",iconType:"dislike"===u?"fill":"outline",className:"size-5"})})]}),(0,a.jsx)(m.LoginConfirmationOverlay,{message:r("LOGIN_MESSAGE_RATE_VIDEO"),visible:b,onCancel:()=>p(!1),onProceed:()=>{p(!1),v()}})]})},h=u},27404:(e,t,i)=>{i.r(t),i.d(t,{VideoBookmark:()=>u,default:()=>h});var a=i(6029),r=i(75828),s=i.n(r),l=i(5700),n=i(55729),o=i(683),d=i(26898),c=i(86013),m=i(80523);let u=({videoId:e,videoData:t=null,darkMode:i=!0,className:r=""})=>{let u=(0,l.c)("common"),[h,x]=(0,n.useState)(!1),[k,b]=(0,n.useState)(!1),[p,g]=(0,n.useState)(!1),{isReady:f,isAuthorized:v,signIn:j}=(0,d.A)();if((0,n.useEffect)(()=>{if(!e||!v)return;let t=(0,o.getActive)()?.id;t&&(async()=>{try{let i=await fetch(`/api/videoBookmark/getBookmark?videoId=${encodeURIComponent(e)}&portal=${t}`),a=await i.json();i.ok&&"boolean"==typeof a.bookmarked&&x(a.bookmarked)}catch(e){console.error("[VideoBookmark] load failed:",e)}})()},[e,v]),!e)return null;let y=async()=>{if(k)return;if(!f||!v)return void g(!0);let i=(0,o.getActive)()?.id;if(!i)return;let a=!h;b(!0),x(a);try{let r=await fetch("/api/videoBookmark/addVideoToSaved",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({videoId:e,bookmarked:a,portal:i,videoData:a?t:null})});if(!r.ok){x(!a);let e=await r.json().catch(()=>({}));console.error("[VideoBookmark] set failed:",e.message||r.status)}}catch(e){x(!a),console.error("[VideoBookmark] set failed:",e)}finally{b(!1)}};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{type:"button","aria-label":u("VIDEO_BOOKMARK_LABEL"),"aria-pressed":h,onClick:y,disabled:k,className:s()("inline-flex size-11 items-center justify-center rounded border transition-colors",i?"border-white/30 text-white hover:bg-white/10":"border-skin-primary-light text-skin-primary-ultradark hover:bg-skin-primary-ultralight",{"opacity-50":k},h&&(i?"bg-white/15":"bg-skin-primary-ultralight"),r),children:(0,a.jsx)(c.I,{iconName:"bookmark",iconType:h?"fill":"outline",className:"size-5"})}),(0,a.jsx)(m.LoginConfirmationOverlay,{message:u("LOGIN_MESSAGE_BOOKMARK_VIDEO"),visible:p,onCancel:()=>g(!1),onProceed:()=>{g(!1),j()}})]})},h=u},66432:(e,t,i)=>{i.d(t,{n:()=>s});var a=i(55729),r=i(66938);let s=()=>{let{streamContext:e}=(0,a.useContext)(r.W);return e?.activeContent}},75696:(e,t,i)=>{i.d(t,{_:()=>a});let a=(0,i(55729).createContext)({active:null})},78704:(e,t,i)=>{i.r(t),i.d(t,{VideoGrid:()=>k,default:()=>b});var a=i(6029),r=i(75828),s=i.n(r),l=i(55729),n=i(86049),o=i(33364),d=i(60451),c=i(12957),m=i(52556),u=i(20502),h=i(75399),x=i(2058);let k=({entries:e=u.AO,title:t="Test & Technik",link:i,moreLinkText:r,showLoadMore:k=!0,loadMoreText:b="Mehr anzeigen",initialCount:p=9,step:g=6,darkMode:f,targetVideoPlaylistId:v,rubrik:j,rubrikLabel:y,total:w,isShorts:N=!1,aspectRatio:S,emitJsonLd:I=!0,..._})=>{let T=S||(N?"9:16":"16:9"),C=e?.items||[],{darkMode:E}=(0,l.useContext)(h.N),R=f??E,V=!!v,[L,M]=(0,l.useState)(null);(0,l.useEffect)(()=>

1{if(!N||0===C.length||window.location.pathname?.startsWith("/video/shorts/"))return;let e=new URLSearchParams(window.location.search).get("shorts");if(!e)return;let t=C.findIndex(t=>String(t?.id)===e);if(t<0)return;let i=setTimeout(()=>M(t),600);return()=>clearTimeout(i)},[N,C]);let[A,O]=(0,l.useState)(C),[B,D]=(0,l.useState)(!1),[z,P]=(0,l.useState)(!1),[G,U]=(0,l.useState)(p);if(0===C.length)return null;let K=async()=>{if(!B&&!z){D(!0);try{let e=Math.floor(A.length/g)+1,t=new URL("/api/target-video-playlist",window.location.origin);t.searchParams.set("playlistId",String(v).trim()),t.searchParams.set("page",String(e)),t.searchParams.set("limit",String(g)),j&&t.searchParams.set("rubrik",j),y&&t.searchParams.set("rubrikLabel",y);let i=A.map(e=>String(e?.id||"").trim()).filter(Boolean);i.length>0&&t.searchParams.set("excludeIds",i.join(","));let a=await fetch(t.toString());if(!a.ok)throw Error(`HTTP ${a.status}`);let r=await a.json(),s=Array.isArray(r?.items)?r.items:[];0===s.length&&P(!0),O(e=>{let t=new Set(e.map(e=>String(e.id))),i=s.filter(e=>!t.has(String(e.id)));return[...e,...i]})}catch(e){console.error("[VideoGrid] load more failed:",e?.message||e)}finally{D(!1)}}},F=V?A:C.slice(0,G),J=!z&&("number"!=typeof w||A.length<w),$=k&&(V?J:G<C.length);return(0,a.jsxs)("div",{className:"px-4",children:[I&&(0,a.jsx)(x.VideoListJSONLD,{items:C,name:t}),(0,a.jsxs)("div",{className:"mx-auto max-w-screen-xl",children:[(0,a.jsx)("div",{className:"px-0",children:(0,a.jsx)(d.M,{title:t,link:i,moreLinkText:r,textColor:R?"bright":"dark",..._})}),(0,a.jsx)("div",{className:s()("grid gap-4","9:16"===T?"grid-cols-2 md:grid-cols-4 lg:grid-cols-5":"grid-cols-1 md:grid-cols-3"),children:F.map((e,t)=>{let i=!N&&"9:16"!==T&&k&&p>3&&(t+1)%3==0&&t<F.length-1;return(0,a.jsxs)(l.Fragment,{children:[(0,a.jsx)(m.VideoThumbnailCard,{...e,aspectRatio:T,size:"small",mobileOverlay:"9:16"!==T,darkMode:R,...N?{onClick:()=>M(t)}:{}}),i&&(0,a.jsx)("div",{className:"md:hidden",children:(0,a.jsx)(n.Ad,{ad:"rectangle",mobileOnly:!0})})]},e.id||t)})}),$&&(0,a.jsx)("div",{className:"mt-8 flex justify-center md:mt-12",children:(0,a.jsx)(o.$,{buttonLabel:B?"…":b,buttonColor:R?"inverted":"primary",onClick:V?K:()=>U(e=>e+g),fullWidth:!1,disabled:B})})]}),N&&(0,a.jsx)(c.v,{videos:F,startIndex:L??0,visible:null!==L,onClose:()=>M(null)})]})},b=k},89895:(e,t,i)=>{i.r(t),i.d(t,{Breadcrumb:()=>f});var a=i(6029),r=i(55729),s=i(75696),l=i(75399),n=i(19844),o=i(71024),d=i.n(o),c=i(89972),m=i(75828),u=i.n(m),h=i(42691),x=i(43340),k=i(86013),b=i(62745),p=i(49832);let g=d()(()=>i.e(40660).then(i.bind(i,40660)).then(e=>e.ReactComponent),{loadableGenerated:{webpack:()=>[40660]}}),f=({currentPageIfNoBreadcrumb:e,currentPage:t=null,breadcrumb:i=null,className:o="",customBreadcrumbData:d=null,darkMode:m})=>{let{isApp:f}=(0,b.K)((0,p.k)(e=>({isApp:e.isApp}))),v=(0,r.useContext)(s._),{darkMode:j}=(0,r.useContext)(l.N)||{},y=void 0!==m?m:!!j,w=(0,c.m)(v?.active);v?.active?.customBreadcrumbData?w=v.active.customBreadcrumbData:d?w=d:i&&(w=i);let N=["inline",y?"text-skin-primary-light":"text-skin-primary-medium","text-sm mr-2"].join(" "),S=t;return(S||!e||w?.length||(S=e),f)?null:(0,a.jsx)("nav",{className:u()("block",y&&"-mb-10 mt-4 px-4 md:my-0 md:px-0",o),"aria-label":"Breadcrumb",children:(0,a.jsxs)(h.R,{slidesPerView:"auto",freeMode:!0,spaceBetween:0,children:[(0,a.jsx)(x.q,{className:"!w-auto",children:(0,a.jsx)(n.Link,{href:"/",children:(0,a.jsx)("div",{className:u()("mr-2 mt-0.5 flex items-center hover:text-skin-primary md:mt-0",y?"text-skin-primary-light":"text-skin-primary-medium"),children:(0,a.jsx)(k.I,{iconName:"home-outline",iconType:"outline",iconDisplay:"inline",textSize:"xl"})})})}),w.map((e,t)=>(0,a.jsx)(x.q,{className:"!w-auto",children:(0,a.jsxs)("span",{children:[(0,a.jsx)(g,{className:"inline-block size-5 shrink-0 -translate-x-1 translate-y-[-2px] fill-current text-gray-400 hover:text-gray-500"}),(0,a.jsx)(n.Link,{contentful:e?.contentfulLink||e,className:N,children:e.title})]})},"breadcrumb-item-"+t)),S&&(0,a.jsx)(x.q,{className:"!w-auto",children:(0,a.jsxs)("span",{children:[(0,a.jsx)(g,{className:"inline-block size-5 shrink-0 -translate-x-1 translate-y-[-2px] fill-current text-gray-400 hover:text-gray-500"}),(0,a.jsx)("span",{className:N,children:S})]})})]})})}}}]);