https://vertical-video.20min.ch/embed.js

1import{c as m}from"./assets/supernext-feed-BpLYPj1g.js";const u='twentymin-feed{--tm-border-radius: 12px;--tm-primary-color: #e30613;--tm-pulse-rgb: 227, 6, 19;--tm-card-shadow: 0 4px 20px rgba(0, 0, 0, .18);--tm-aspect: 9/16;display:block;position:relative;overflow:hidden;border-radius:var(--tm-border-radius);cursor:pointer;background:#111;aspect-ratio:var(--tm-aspect);box-shadow:var(--tm-card-shadow);-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1)}twentymin-feed:active{transform:scale(.985)}twentymin-feed:focus-visible{outline:3px solid var(--tm-primary-color);outline-offset:2px}.tm-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.tm-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0000 45%,#00000059 75%,#000000c7);pointer-events:none}.tm-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;pointer-events:none}.tm-show-play .tm-badge{display:flex}.tm-badge:before{content:"";display:block;width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}.tm-cta{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}.tm-cta-pill{display:inline-flex;align-items:center;max-width:calc(100% - 24px);padding:10px 14px;border-radius:20px;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#fff;font-size:13px;font-weight:600;line-height:1.2}@media(prefers-reduced-motion:reduce){twentymin-feed{transition:none}}',o=(s,t)=>{const i=document.createElement(s);return i.className=t,i},b=s=>!s||s.length===0?null:(s.find(i=>/mp4/i.test(i.name)||/\.mp4(\?|$)/i.test(i.src))??s[0]).src,f=async(s,t)=>{var i;if(s)try{const n=new URLSearchParams({mixId:s,limit:"10"});t&&n.set("contentId",t);const r=`${m()}/video/v1/cms/videos?${n}`,a=await fetch(r);if(!a.ok)return;const d=((await a.json()).items??[]).filter(l=>!l.deleted&&l.enabled);if(d.length===0)return;const c=t&&d.find(l=>l.contentId===t)||d[0];return{contentId:c.contentId,poster:((i=c.poster)==null?void 0:i.src)??null,video:b(c.videos)}}catch{return}},y=({contentId:s,mixId:t})=>{const i="https://20min.appshort.link/lift",n=new URLSearchParams({contentId:s});return t&&n.set("mixId",t),n.set("singlevideo","false"),`${i}?${n.toString()}`},p="twentymin-feed-styles",h={tapFullscreen:"Hier tippen für Vollbild"},g=()=>{if(document.getElementById(p))return;const s=document.createElement("style");s.id=p,s.textContent=u,document.head.appendChild(s)};class v extends HTMLElement{constructor(){super(...arguments),this.onClick=()=>this.open(),this.onKeyDown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.open())}}connectedCallback(){g(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.setAttribute("aria-label",h.tapFullscreen),this.render(),f(this.getAttribute("mix-id"),this.getAttribute("content-id")).then(t=>{this.isConnected&&(this.teaser=t,this.render())}),this.addEventListener("click",this.onClick),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){var t;(t=this.observer)==null||t.disconnect(),this.removeEventListener("click",this.onClick),this.removeEventListener("keydown",this.onKeyDown)}render(){var n,r,a;if((n=this.observer)==null||n.disconnect(),this.observer=void 0,this.video=void 0,this.innerHTML="",this.setPlayBadgeVisible(!1),(r=this.teaser)!=null&&r.video){const e=o("video","tm-media");e.muted=!0,e.defaultMuted=!0,e.setAttribute("muted",""),e.playsInline=!0,e.setAttribute("playsinline",""),e.setAttribute("webkit-playsinline",""),e.loop=!0,e.preload="auto",e.setAttribute("aria-hidden","true"),this.teaser.poster&&(e.poster=this.teaser.poster),e.src=this.teaser.video,this.appendChild(e),this.video=e,this.observeForPlay(e)}else if((a=this.teaser)!=null&&a.poster){const e=o("img","tm-media");e.loading="lazy",e.alt="",e.src=this.teaser.poster,this.appendChild(e),this.setPlayBadgeVisible(!0)}this.appendChild(o("div","tm-scrim")),this.appendChild(o("div","tm-badge"));const t=o("span","tm-cta-pill");t.textContent=h.tapFullscreen;const i=o("div","tm-cta");i.appendChild(t),this.appendChild(i)}

1setPlayBadgeVisible(t){this.classList.toggle("tm-show-play",t)}observeForPlay(t){const i=()=>{t.muted=!0,t.play().then(()=>this.setPlayBadgeVisible(!1)).catch(()=>this.setPlayBadgeVisible(!0))};if(typeof IntersectionObserver>"u"){i();return}this.observer=new IntersectionObserver(n=>{n.forEach(r=>{r.isIntersecting?i():t.pause()})},{threshold:.25}),this.observer.observe(this)}open(){var i,n;const t=((i=this.teaser)==null?void 0:i.contentId)??this.getAttribute("content-id");if(!t){console.warn("[twentymin-feed] missing content-id");return}(n=this.video)==null||n.pause(),window.location.href=y({contentId:t,mixId:this.getAttribute("mix-id")})}}customElements.get("twentymin-feed")||customElements.define("twentymin-feed",v);