@mux/mux-player-react 3.4.1 → 3.4.2-canary.1

package/dist/news/index.cjs.js

@@ -0,0 +1,217 @@
+"use strict";var P=Object.create;var c=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var E=(t,i)=>{for(var o in i)c(t,o,{get:i[o],enumerable:!0})},y=(t,i,o,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of V(i))!z.call(t,l)&&l!==o&&c(t,l,{get:()=>i[l],enumerable:!(r=N(i,l))||r.enumerable});return t};var p=(t,i,o)=>(o=t!=null?P(I(t)):{},y(i||!t||!t.__esModule?c(o,"default",{value:t,enumerable:!0}):o,t)),C=t=>y(c({},"__esModule",{value:!0}),t);var j={};E(j,{default:()=>U});module.exports=C(j);var a=p(require("react")),b=p(require("@mux/mux-player-react/ads")),v=p(require("@mux/mux-player-react/themes/news"));var e=p(require("react"));var f=`/* Main Playlist Container */
+.playlist {
+  /* Ensure it wraps on smaller screens */
+  display: inline;
+  position: relative;
+  background-color: #12121263;
+  z-index: 2;
+  top: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 1336px) {
+  .playlist {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.5;
+  z-index: 1;
+}
+
+.post-video-section {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  padding: 1.5rem 2rem;
+  position: relative;
+  gap: 1rem;
+  padding: 1.5rem 2rem;
+  height: max-content;
+  box-sizing: border-box;
+  z-index: 2;
+  max-width: 1200px;
+}
+
+.post-video-section hr {
+  border: none;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  width: 1px;
+}
+
+/* Video Section */
+.video-section {
+  flex: 2;
+}
+
+.video-container {
+  position: relative;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 3rem;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.video-container > .video-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.video-thumbnail {
+  width: 100%;
+  display: block;
+}
+
+.video-title {
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  color: #ffffff;
+  text-decoration: none;
+  line-height: 1.4;
+  /* Adjusted for better readability */
+  word-wrap: break-word;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+
+.video-title:hover {
+  text-decoration: underline;
+}
+
+/* Countdown Timer */
+.countdown-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3.75rem;
+  height: 3.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.countdown-ring {
+  position: absolute;
+}
+
+.circle-background {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 0.25rem;
+}
+
+.circle-progress {
+  fill: none;
+  stroke: #00a3dd;
+  stroke-width: 0.25rem;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.count-text {
+  position: absolute;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+/* Related Videos */
+.related-videos-section {
+  flex: 1;
+  width: 100%;
+}
+
+.related-title {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0;
+  line-height: 2rem;
+}
+
+.related-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.related-item {
+  display: flex;
+  align-items: start;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-radius: 0;
+  background: none;
+}
+
+.related-item:hover {
+  background: none;
+}
+.related-thumbnail {
+  width: 7rem;
+  object-fit: cover;
+  aspect-ratio: 16 / 9;
+}
+
+.related-text {
+  font-size: 0.9rem;
+  color: white;
+  line-height: 1.4;
+  word-wrap: break-word;
+  max-width: 100%;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.related-text:hover {
+  text-decoration: underline;
+}
+
+/* Responsive  */
+
+@media (max-width: 768px) {
+  .post-video-section {
+    grid-template-columns: 1fr;
+    margin: auto;
+  }
+
+  .post-video-section h2 {
+    display: none;
+  }
+
+  hr {
+    display: none;
+  }
+
+  .video-section {
+    width: 60%;
+    margin: auto;
+  }
+
+  .related-videos-section {
+    display: none;
+  }
+}
+`;var T=({video:t,relatedVideos:i,isVisible:o,selectVideoCallback:r,timerCallback:l})=>{let[s,d]=(0,e.useState)(3);return(0,e.useEffect)(()=>{if(!o){d(3);return}if(s<0){l();return}let n=setInterval(()=>{d(m=>Math.max(m-1,-1))},1e3);return()=>clearInterval(n)},[s,o]),e.default.createElement(e.default.Fragment,null,e.default.createElement("style",null,f),e.default.createElement("div",{className:"playlist",style:{display:o?"grid":"none"}},e.default.createElement("div",{className:"overlay",style:{display:o?"grid":"none"}}),e.default.createElement("div",{className:"post-video-section",style:{display:o?"grid":"none",zIndex:99}},e.default.createElement("div",{className:"video-section"},e.default.createElement("div",{className:"video-container"},e.default.createElement("h2",{className:"title"},"Video"),e.default.createElement("div",{className:"video-wrapper"},e.default.createElement("img",{className:"video-thumbnail",src:t.imageUrl,alt:t.title}),e.default.createElement("div",{className:"countdown-overlay"},e.default.createElement("svg",{className:"countdown-ring",width:"50",height:"50"},e.default.createElement("circle",{cx:"25",cy:"25",r:"22",className:"circle-background"}),e.default.createElement("circle",{cx:"25",cy:"25",r:"22",className:"circle-progress",style:{strokeDasharray:"138",strokeDashoffset:`${s/3*138}`}})),e.default.createElement("span",{className:"count-text"},s))),e.default.createElement("p",{className:"video-title"},t.title))),e.default.createElement("hr",null),e.default.createElement("div",{className:"related-videos-section"},e.default.createElement("h3",{className:"related-title"},"Related Videos"),e.default.createElement("ul",{className:"related-list"},i.map((n,m)=>e.default.createElement("li",{key:m},e.default.createElement("button",{className:"related-item",onClick:()=>r(m)},e.default.createElement("img",{className:"related-thumbnail",src:n.imageUrl,alt:n.title}),e.default.createElement("p",{className:"related-text"},n.title)))))))))},h=T;var M=({videoList:t,...i})=>{let o=(0,a.useRef)(null),[r,l]=(0,a.useState)(0),[s,d]=(0,a.useState)(!1),[n,m]=(0,a.useState)(0);function x(){d(!1),l(r+1),setTimeout(()=>{try{o.current.play()}catch{}},200)}function w(u){d(!1),l(u),setTimeout(()=>{try{o.current.play()}catch{}},200)}return a.default.createElement(b.default,{theme:v.default,style:{aspectRatio:"16/9"},preferPlayback:"mse",maxResolution:"2160p",minResolution:"540p",renditionOrder:"desc",metadata:{video_title:t[r].title},...i,ref:o,key:`player-${n}`,playbackId:t[r].playbackId,adTagUrl:t[r].adTagUrl,onEnded:u=>{var g;r<t.length-1?d(!0):(l(0),m(k=>k+1)),(g=i.onEnded)==null||g.call(i,u)}},a.default.createElement(h,{video:r<t.length-1?t[r+1]:t[0],relatedVideos:t,isVisible:s,selectVideoCallback:w,timerCallback:x}))},U=M;
+//# sourceMappingURL=index.cjs.js.map

package/dist/news/index.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/news/index.tsx", "../../src/news/playlist-end-screen.tsx", "../../src/news/playlist-end-screen.css"],
+  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport MuxPlayer, { MuxPlayerProps } from '@mux/mux-player-react/ads';\nimport NewsTheme from '@mux/mux-player-react/themes/news';\nimport PlaylistEndScreen from './playlist-end-screen';\n\nexport interface VideoItem {\n  imageUrl: string;\n  title: string;\n  playbackId: string;\n  adTagUrl: string;\n}\n\nexport type PlaylistVideos = VideoItem[];\n\nexport interface PlaylistProps extends Omit<MuxPlayerProps, 'playbackId' | 'adTagUrl'> {\n  videoList: PlaylistVideos;\n}\n\nconst MuxNewsPlayer = ({ videoList, ...props }: PlaylistProps) => {\n  const mediaElRef = useRef<any>(null);\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isEndScreenVisible, setIsEndScreenVisible] = useState(false);\n  const [playerKey, setPlayerKey] = useState(0);\n\n  function playVideo() {\n    setIsEndScreenVisible(false);\n    setCurrentIndex(currentIndex + 1);\n    setTimeout(() => {\n      try {\n        mediaElRef.current.play();\n      } catch {\n        // Ignore AbortError: The play() request was interrupted by a call to pause()\n      }\n    }, 200);\n  }\n\n  function selectVideo(index: number) {\n    setIsEndScreenVisible(false);\n    setCurrentIndex(index);\n    setTimeout(() => {\n      try {\n        mediaElRef.current.play();\n      } catch {\n        // Ignore AbortError: The play() request was interrupted by a call to pause()\n      }\n    }, 200);\n  }\n\n  return (\n    <MuxPlayer\n      theme={NewsTheme}\n      style={{ aspectRatio: '16/9' }}\n      preferPlayback=\"mse\"\n      maxResolution=\"2160p\"\n      minResolution=\"540p\"\n      renditionOrder=\"desc\"\n      metadata={{\n        video_title: videoList[currentIndex].title,\n      }}\n      {...props}\n      ref={mediaElRef}\n      key={`player-${playerKey}`}\n      playbackId={videoList[currentIndex].playbackId}\n      adTagUrl={videoList[currentIndex].adTagUrl}\n      onEnded={(event) => {\n        if (currentIndex < videoList.length - 1) {\n          setIsEndScreenVisible(true);\n        } else {\n          setCurrentIndex(0);\n          setPlayerKey((prev) => prev + 1);\n        }\n        props.onEnded?.(event);\n      }}\n    >\n      <PlaylistEndScreen\n        video={currentIndex < videoList.length - 1 ? videoList[currentIndex + 1] : videoList[0]}\n        relatedVideos={videoList}\n        isVisible={isEndScreenVisible}\n        selectVideoCallback={selectVideo}\n        timerCallback={playVideo}\n      />\n    </MuxPlayer>\n  );\n};\n\nexport default MuxNewsPlayer;\n", "import React, { useEffect, useState } from 'react';\nimport { VideoItem, PlaylistVideos } from '.';\nimport style from './playlist-end-screen.css';\n\ninterface PlaylistEndScreenProps {\n  video: VideoItem;\n  relatedVideos: PlaylistVideos;\n  isVisible: boolean;\n  selectVideoCallback: (index: number) => void;\n  timerCallback: () => void;\n}\n\nconst PlaylistEndScreen = ({\n  video,\n  relatedVideos,\n  isVisible,\n  selectVideoCallback,\n  timerCallback,\n}: PlaylistEndScreenProps) => {\n  const [count, setCount] = useState(3);\n\n  useEffect(() => {\n    if (!isVisible) {\n      setCount(3);\n      return;\n    }\n\n    if (count < 0) {\n      timerCallback();\n      return;\n    }\n    const timer = setInterval(() => {\n      setCount((prev) => Math.max(prev - 1, -1));\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [count, isVisible]);\n\n  return (\n    <>\n      <style>{style}</style>\n      <div className=\"playlist\" style={{ display: isVisible ? 'grid' : 'none' }}>\n        <div className=\"overlay\" style={{ display: isVisible ? 'grid' : 'none' }} />\n        <div className=\"post-video-section\" style={{ display: isVisible ? 'grid' : 'none', zIndex: 99 }}>\n          <div className=\"video-section\">\n            <div className=\"video-container\">\n              <h2 className=\"title\">Video</h2>\n              <div className=\"video-wrapper\">\n                <img className=\"video-thumbnail\" src={video.imageUrl} alt={video.title} />\n                <div className=\"countdown-overlay\">\n                  <svg className=\"countdown-ring\" width=\"50\" height=\"50\">\n                    <circle cx=\"25\" cy=\"25\" r=\"22\" className=\"circle-background\" />\n                    <circle\n                      cx=\"25\"\n                      cy=\"25\"\n                      r=\"22\"\n                      className=\"circle-progress\"\n                      style={{\n                        strokeDasharray: '138',\n                        strokeDashoffset: `${(count / 3) * 138}`,\n                      }}\n                    />\n                  </svg>\n                  <span className=\"count-text\">{count}</span>\n                </div>\n              </div>\n              <p className=\"video-title\">{video.title}</p>\n            </div>\n          </div>\n          <hr />\n          <div className=\"related-videos-section\">\n            <h3 className=\"related-title\">Related Videos</h3>\n            <ul className=\"related-list\">\n              {relatedVideos.map((relatedVideo, index) => (\n                <li key={index}>\n                  <button className=\"related-item\" onClick={() => selectVideoCallback(index)}>\n                    <img className=\"related-thumbnail\" src={relatedVideo.imageUrl} alt={relatedVideo.title} />\n                    <p className=\"related-text\">{relatedVideo.title}</p>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default PlaylistEndScreen;\n", "/* Main Playlist Container */\n.playlist {\n  /* Ensure it wraps on smaller screens */\n  display: inline;\n  position: relative;\n  background-color: #12121263;\n  z-index: 2;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n@media (min-width: 1336px) {\n  .playlist {\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.overlay {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: black;\n  opacity: 0.5;\n  z-index: 1;\n}\n\n.post-video-section {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  padding: 1.5rem 2rem;\n  position: relative;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  height: max-content;\n  box-sizing: border-box;\n  z-index: 2;\n  max-width: 1200px;\n}\n\n.post-video-section hr {\n  border: none;\n  background: rgba(255, 255, 255, 0.5);\n  height: 100%;\n  width: 1px;\n}\n\n/* Video Section */\n.video-section {\n  flex: 2;\n}\n\n.video-container {\n  position: relative;\n}\n\n.title {\n  font-size: 2.5rem;\n  font-weight: 500;\n  line-height: 3rem;\n  margin: 0;\n  margin-bottom: 1rem;\n}\n\n.video-wrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.video-container > .video-title {\n  font-size: 1.3rem;\n  font-weight: 600;\n}\n\n.video-thumbnail {\n  width: 100%;\n  display: block;\n}\n\n.video-title {\n  font-size: 1rem;\n  margin-top: 0.5rem;\n  cursor: pointer;\n  color: #ffffff;\n  text-decoration: none;\n  line-height: 1.4;\n  /* Adjusted for better readability */\n  word-wrap: break-word;\n  font-weight: 500;\n  margin-bottom: 0;\n}\n\n.video-title:hover {\n  text-decoration: underline;\n}\n\n/* Countdown Timer */\n.countdown-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3.75rem;\n  height: 3.75rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.countdown-ring {\n  position: absolute;\n}\n\n.circle-background {\n  fill: none;\n  stroke: rgba(255, 255, 255, 0.2);\n  stroke-width: 0.25rem;\n}\n\n.circle-progress {\n  fill: none;\n  stroke: #00a3dd;\n  stroke-width: 0.25rem;\n  stroke-linecap: round;\n  transition: stroke-dashoffset 1s linear;\n}\n\n.count-text {\n  position: absolute;\n  font-size: 1rem;\n  font-weight: bold;\n  color: #ffffff;\n}\n\n/* Related Videos */\n.related-videos-section {\n  flex: 1;\n  width: 100%;\n}\n\n.related-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n  margin: 0;\n  line-height: 2rem;\n}\n\n.related-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.related-item {\n  display: flex;\n  align-items: start;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.5);\n  width: 100%;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  border-radius: 0;\n  background: none;\n}\n\n.related-item:hover {\n  background: none;\n}\n.related-thumbnail {\n  width: 7rem;\n  object-fit: cover;\n  aspect-ratio: 16 / 9;\n}\n\n.related-text {\n  font-size: 0.9rem;\n  color: white;\n  line-height: 1.4;\n  word-wrap: break-word;\n  max-width: 100%;\n  margin-top: 0.25rem;\n  display: block;\n}\n\n.related-text:hover {\n  text-decoration: underline;\n}\n\n/* Responsive  */\n\n@media (max-width: 768px) {\n  .post-video-section {\n    grid-template-columns: 1fr;\n    margin: auto;\n  }\n\n  .post-video-section h2 {\n    display: none;\n  }\n\n  hr {\n    display: none;\n  }\n\n  .video-section {\n    width: 60%;\n    margin: auto;\n  }\n\n  .related-videos-section {\n    display: none;\n  }\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAwC,oBACxCC,EAA0C,wCAC1CC,EAAsB,gDCFtB,IAAAC,EAA2C,oBCA3C,IAAAC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDYA,IAAMC,EAAoB,CAAC,CACzB,MAAAC,EACA,cAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,cAAAC,CACF,IAA8B,CAC5B,GAAM,CAACC,EAAOC,CAAQ,KAAI,YAAS,CAAC,EAEpC,sBAAU,IAAM,CACd,GAAI,CAACJ,EAAW,CACdI,EAAS,CAAC,EACV,MACF,CAEA,GAAID,EAAQ,EAAG,CACbD,EAAc,EACd,MACF,CACA,IAAMG,EAAQ,YAAY,IAAM,CAC9BD,EAAUE,GAAS,KAAK,IAAIA,EAAO,EAAG,EAAE,CAAC,CAC3C,EAAG,GAAI,EAEP,MAAO,IAAM,cAAcD,CAAK,CAClC,EAAG,CAACF,EAAOH,CAAS,CAAC,EAGnB,EAAAO,QAAA,gBAAAA,QAAA,cACE,EAAAA,QAAA,cAAC,aAAOC,CAAM,EACd,EAAAD,QAAA,cAAC,OAAI,UAAU,WAAW,MAAO,CAAE,QAASP,EAAY,OAAS,MAAO,GACtE,EAAAO,QAAA,cAAC,OAAI,UAAU,UAAU,MAAO,CAAE,QAASP,EAAY,OAAS,MAAO,EAAG,EAC1E,EAAAO,QAAA,cAAC,OAAI,UAAU,qBAAqB,MAAO,CAAE,QAASP,EAAY,OAAS,OAAQ,OAAQ,EAAG,GAC5F,EAAAO,QAAA,cAAC,OAAI,UAAU,iBACb,EAAAA,QAAA,cAAC,OAAI,UAAU,mBACb,EAAAA,QAAA,cAAC,MAAG,UAAU,SAAQ,OAAK,EAC3B,EAAAA,QAAA,cAAC,OAAI,UAAU,iBACb,EAAAA,QAAA,cAAC,OAAI,UAAU,kBAAkB,IAAKT,EAAM,SAAU,IAAKA,EAAM,MAAO,EACxE,EAAAS,QAAA,cAAC,OAAI,UAAU,qBACb,EAAAA,QAAA,cAAC,OAAI,UAAU,iBAAiB,MAAM,KAAK,OAAO,MAChD,EAAAA,QAAA,cAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,UAAU,oBAAoB,EAC7D,EAAAA,QAAA,cAAC,UACC,GAAG,KACH,GAAG,KACH,EAAE,KACF,UAAU,kBACV,MAAO,CACL,gBAAiB,MACjB,iBAAkB,GAAIJ,EAAQ,EAAK,GAAG,EACxC,EACF,CACF,EACA,EAAAI,QAAA,cAAC,QAAK,UAAU,cAAcJ,CAAM,CACtC,CACF,EACA,EAAAI,QAAA,cAAC,KAAE,UAAU,eAAeT,EAAM,KAAM,CAC1C,CACF,EACA,EAAAS,QAAA,cAAC,SAAG,EACJ,EAAAA,QAAA,cAAC,OAAI,UAAU,0BACb,EAAAA,QAAA,cAAC,MAAG,UAAU,iBAAgB,gBAAc,EAC5C,EAAAA,QAAA,cAAC,MAAG,UAAU,gBACXR,EAAc,IAAI,CAACU,EAAcC,IAChC,EAAAH,QAAA,cAAC,MAAG,IAAKG,GACP,EAAAH,QAAA,cAAC,UAAO,UAAU,eAAe,QAAS,IAAMN,EAAoBS,CAAK,GACvE,EAAAH,QAAA,cAAC,OAAI,UAAU,oBAAoB,IAAKE,EAAa,SAAU,IAAKA,EAAa,MAAO,EACxF,EAAAF,QAAA,cAAC,KAAE,UAAU,gBAAgBE,EAAa,KAAM,CAClD,CACF,CACD,CACH,CACF,CACF,CACF,CACF,CAEJ,EAEOD,EAAQX,EDvEf,IAAMc,EAAgB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,IAAqB,CAChE,IAAMC,KAAa,UAAY,IAAI,EAC7B,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,EAC5C,CAACC,EAAoBC,CAAqB,KAAI,YAAS,EAAK,EAC5D,CAACC,EAAWC,CAAY,KAAI,YAAS,CAAC,EAE5C,SAASC,GAAY,CACnBH,EAAsB,EAAK,EAC3BF,EAAgBD,EAAe,CAAC,EAChC,WAAW,IAAM,CACf,GAAI,CACFD,EAAW,QAAQ,KAAK,CAC1B,MAAQ,CAER,CACF,EAAG,GAAG,CACR,CAEA,SAASQ,EAAYC,EAAe,CAClCL,EAAsB,EAAK,EAC3BF,EAAgBO,CAAK,EACrB,WAAW,IAAM,CACf,GAAI,CACFT,EAAW,QAAQ,KAAK,CAC1B,MAAQ,CAER,CACF,EAAG,GAAG,CACR,CAEA,OACE,EAAAU,QAAA,cAAC,EAAAC,QAAA,CACC,MAAO,EAAAC,QACP,MAAO,CAAE,YAAa,MAAO,EAC7B,eAAe,MACf,cAAc,QACd,cAAc,OACd,eAAe,OACf,SAAU,CACR,YAAad,EAAUG,CAAY,EAAE,KACvC,EACC,GAAGF,EACJ,IAAKC,EACL,IAAK,UAAUK,CAAS,GACxB,WAAYP,EAAUG,CAAY,EAAE,WACpC,SAAUH,EAAUG,CAAY,EAAE,SAClC,QAAUY,GAAU,CAhE1B,IAAAC,EAiEYb,EAAeH,EAAU,OAAS,EACpCM,EAAsB,EAAI,GAE1BF,EAAgB,CAAC,EACjBI,EAAcS,GAASA,EAAO,CAAC,IAEjCD,EAAAf,EAAM,UAAN,MAAAe,EAAA,KAAAf,EAAgBc,EAClB,GAEA,EAAAH,QAAA,cAACM,EAAA,CACC,MAAOf,EAAeH,EAAU,OAAS,EAAIA,EAAUG,EAAe,CAAC,EAAIH,EAAU,CAAC,EACtF,cAAeA,EACf,UAAWK,EACX,oBAAqBK,EACrB,cAAeD,EACjB,CACF,CAEJ,EAEOU,EAAQpB",
+  "names": ["index_exports", "__export", "index_default", "__toCommonJS", "import_react", "import_ads", "import_news", "import_react", "playlist_end_screen_default", "PlaylistEndScreen", "video", "relatedVideos", "isVisible", "selectVideoCallback", "timerCallback", "count", "setCount", "timer", "prev", "React", "playlist_end_screen_default", "relatedVideo", "index", "MuxNewsPlayer", "videoList", "props", "mediaElRef", "currentIndex", "setCurrentIndex", "isEndScreenVisible", "setIsEndScreenVisible", "playerKey", "setPlayerKey", "playVideo", "selectVideo", "index", "React", "MuxPlayer", "NewsTheme", "event", "_a", "prev", "playlist_end_screen_default", "index_default"]
+}

package/dist/news/index.mjs

@@ -0,0 +1,217 @@
+import y,{useRef as P,useState as c}from"react";import N from"@mux/mux-player-react/ads";import V from"@mux/mux-player-react/themes/news";import e,{useEffect as x,useState as w}from"react";var u=`/* Main Playlist Container */
+.playlist {
+  /* Ensure it wraps on smaller screens */
+  display: inline;
+  position: relative;
+  background-color: #12121263;
+  z-index: 2;
+  top: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 1336px) {
+  .playlist {
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.5;
+  z-index: 1;
+}
+
+.post-video-section {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  padding: 1.5rem 2rem;
+  position: relative;
+  gap: 1rem;
+  padding: 1.5rem 2rem;
+  height: max-content;
+  box-sizing: border-box;
+  z-index: 2;
+  max-width: 1200px;
+}
+
+.post-video-section hr {
+  border: none;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  width: 1px;
+}
+
+/* Video Section */
+.video-section {
+  flex: 2;
+}
+
+.video-container {
+  position: relative;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 3rem;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.video-container > .video-title {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.video-thumbnail {
+  width: 100%;
+  display: block;
+}
+
+.video-title {
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  color: #ffffff;
+  text-decoration: none;
+  line-height: 1.4;
+  /* Adjusted for better readability */
+  word-wrap: break-word;
+  font-weight: 500;
+  margin-bottom: 0;
+}
+
+.video-title:hover {
+  text-decoration: underline;
+}
+
+/* Countdown Timer */
+.countdown-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3.75rem;
+  height: 3.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.countdown-ring {
+  position: absolute;
+}
+
+.circle-background {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 0.25rem;
+}
+
+.circle-progress {
+  fill: none;
+  stroke: #00a3dd;
+  stroke-width: 0.25rem;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.count-text {
+  position: absolute;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+/* Related Videos */
+.related-videos-section {
+  flex: 1;
+  width: 100%;
+}
+
+.related-title {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0;
+  line-height: 2rem;
+}
+
+.related-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.related-item {
+  display: flex;
+  align-items: start;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-radius: 0;
+  background: none;
+}
+
+.related-item:hover {
+  background: none;
+}
+.related-thumbnail {
+  width: 7rem;
+  object-fit: cover;
+  aspect-ratio: 16 / 9;
+}
+
+.related-text {
+  font-size: 0.9rem;
+  color: white;
+  line-height: 1.4;
+  word-wrap: break-word;
+  max-width: 100%;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.related-text:hover {
+  text-decoration: underline;
+}
+
+/* Responsive  */
+
+@media (max-width: 768px) {
+  .post-video-section {
+    grid-template-columns: 1fr;
+    margin: auto;
+  }
+
+  .post-video-section h2 {
+    display: none;
+  }
+
+  hr {
+    display: none;
+  }
+
+  .video-section {
+    width: 60%;
+    margin: auto;
+  }
+
+  .related-videos-section {
+    display: none;
+  }
+}
+`;var k=({video:t,relatedVideos:l,isVisible:i,selectVideoCallback:o,timerCallback:d})=>{let[a,n]=w(3);return x(()=>{if(!i){n(3);return}if(a<0){d();return}let r=setInterval(()=>{n(s=>Math.max(s-1,-1))},1e3);return()=>clearInterval(r)},[a,i]),e.createElement(e.Fragment,null,e.createElement("style",null,u),e.createElement("div",{className:"playlist",style:{display:i?"grid":"none"}},e.createElement("div",{className:"overlay",style:{display:i?"grid":"none"}}),e.createElement("div",{className:"post-video-section",style:{display:i?"grid":"none",zIndex:99}},e.createElement("div",{className:"video-section"},e.createElement("div",{className:"video-container"},e.createElement("h2",{className:"title"},"Video"),e.createElement("div",{className:"video-wrapper"},e.createElement("img",{className:"video-thumbnail",src:t.imageUrl,alt:t.title}),e.createElement("div",{className:"countdown-overlay"},e.createElement("svg",{className:"countdown-ring",width:"50",height:"50"},e.createElement("circle",{cx:"25",cy:"25",r:"22",className:"circle-background"}),e.createElement("circle",{cx:"25",cy:"25",r:"22",className:"circle-progress",style:{strokeDasharray:"138",strokeDashoffset:`${a/3*138}`}})),e.createElement("span",{className:"count-text"},a))),e.createElement("p",{className:"video-title"},t.title))),e.createElement("hr",null),e.createElement("div",{className:"related-videos-section"},e.createElement("h3",{className:"related-title"},"Related Videos"),e.createElement("ul",{className:"related-list"},l.map((r,s)=>e.createElement("li",{key:s},e.createElement("button",{className:"related-item",onClick:()=>o(s)},e.createElement("img",{className:"related-thumbnail",src:r.imageUrl,alt:r.title}),e.createElement("p",{className:"related-text"},r.title)))))))))},g=k;var I=({videoList:t,...l})=>{let i=P(null),[o,d]=c(0),[a,n]=c(!1),[r,s]=c(0);function f(){n(!1),d(o+1),setTimeout(()=>{try{i.current.play()}catch{}},200)}function h(m){n(!1),d(m),setTimeout(()=>{try{i.current.play()}catch{}},200)}return y.createElement(N,{theme:V,style:{aspectRatio:"16/9"},preferPlayback:"mse",maxResolution:"2160p",minResolution:"540p",renditionOrder:"desc",metadata:{video_title:t[o].title},...l,ref:i,key:`player-${r}`,playbackId:t[o].playbackId,adTagUrl:t[o].adTagUrl,onEnded:m=>{var p;o<t.length-1?n(!0):(d(0),s(b=>b+1)),(p=l.onEnded)==null||p.call(l,m)}},y.createElement(g,{video:o<t.length-1?t[o+1]:t[0],relatedVideos:t,isVisible:a,selectVideoCallback:h,timerCallback:f}))},K=I;export{K as default};
+//# sourceMappingURL=index.mjs.map

package/dist/news/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/news/index.tsx", "../../src/news/playlist-end-screen.tsx", "../../src/news/playlist-end-screen.css"],
+  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport MuxPlayer, { MuxPlayerProps } from '@mux/mux-player-react/ads';\nimport NewsTheme from '@mux/mux-player-react/themes/news';\nimport PlaylistEndScreen from './playlist-end-screen';\n\nexport interface VideoItem {\n  imageUrl: string;\n  title: string;\n  playbackId: string;\n  adTagUrl: string;\n}\n\nexport type PlaylistVideos = VideoItem[];\n\nexport interface PlaylistProps extends Omit<MuxPlayerProps, 'playbackId' | 'adTagUrl'> {\n  videoList: PlaylistVideos;\n}\n\nconst MuxNewsPlayer = ({ videoList, ...props }: PlaylistProps) => {\n  const mediaElRef = useRef<any>(null);\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isEndScreenVisible, setIsEndScreenVisible] = useState(false);\n  const [playerKey, setPlayerKey] = useState(0);\n\n  function playVideo() {\n    setIsEndScreenVisible(false);\n    setCurrentIndex(currentIndex + 1);\n    setTimeout(() => {\n      try {\n        mediaElRef.current.play();\n      } catch {\n        // Ignore AbortError: The play() request was interrupted by a call to pause()\n      }\n    }, 200);\n  }\n\n  function selectVideo(index: number) {\n    setIsEndScreenVisible(false);\n    setCurrentIndex(index);\n    setTimeout(() => {\n      try {\n        mediaElRef.current.play();\n      } catch {\n        // Ignore AbortError: The play() request was interrupted by a call to pause()\n      }\n    }, 200);\n  }\n\n  return (\n    <MuxPlayer\n      theme={NewsTheme}\n      style={{ aspectRatio: '16/9' }}\n      preferPlayback=\"mse\"\n      maxResolution=\"2160p\"\n      minResolution=\"540p\"\n      renditionOrder=\"desc\"\n      metadata={{\n        video_title: videoList[currentIndex].title,\n      }}\n      {...props}\n      ref={mediaElRef}\n      key={`player-${playerKey}`}\n      playbackId={videoList[currentIndex].playbackId}\n      adTagUrl={videoList[currentIndex].adTagUrl}\n      onEnded={(event) => {\n        if (currentIndex < videoList.length - 1) {\n          setIsEndScreenVisible(true);\n        } else {\n          setCurrentIndex(0);\n          setPlayerKey((prev) => prev + 1);\n        }\n        props.onEnded?.(event);\n      }}\n    >\n      <PlaylistEndScreen\n        video={currentIndex < videoList.length - 1 ? videoList[currentIndex + 1] : videoList[0]}\n        relatedVideos={videoList}\n        isVisible={isEndScreenVisible}\n        selectVideoCallback={selectVideo}\n        timerCallback={playVideo}\n      />\n    </MuxPlayer>\n  );\n};\n\nexport default MuxNewsPlayer;\n", "import React, { useEffect, useState } from 'react';\nimport { VideoItem, PlaylistVideos } from '.';\nimport style from './playlist-end-screen.css';\n\ninterface PlaylistEndScreenProps {\n  video: VideoItem;\n  relatedVideos: PlaylistVideos;\n  isVisible: boolean;\n  selectVideoCallback: (index: number) => void;\n  timerCallback: () => void;\n}\n\nconst PlaylistEndScreen = ({\n  video,\n  relatedVideos,\n  isVisible,\n  selectVideoCallback,\n  timerCallback,\n}: PlaylistEndScreenProps) => {\n  const [count, setCount] = useState(3);\n\n  useEffect(() => {\n    if (!isVisible) {\n      setCount(3);\n      return;\n    }\n\n    if (count < 0) {\n      timerCallback();\n      return;\n    }\n    const timer = setInterval(() => {\n      setCount((prev) => Math.max(prev - 1, -1));\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [count, isVisible]);\n\n  return (\n    <>\n      <style>{style}</style>\n      <div className=\"playlist\" style={{ display: isVisible ? 'grid' : 'none' }}>\n        <div className=\"overlay\" style={{ display: isVisible ? 'grid' : 'none' }} />\n        <div className=\"post-video-section\" style={{ display: isVisible ? 'grid' : 'none', zIndex: 99 }}>\n          <div className=\"video-section\">\n            <div className=\"video-container\">\n              <h2 className=\"title\">Video</h2>\n              <div className=\"video-wrapper\">\n                <img className=\"video-thumbnail\" src={video.imageUrl} alt={video.title} />\n                <div className=\"countdown-overlay\">\n                  <svg className=\"countdown-ring\" width=\"50\" height=\"50\">\n                    <circle cx=\"25\" cy=\"25\" r=\"22\" className=\"circle-background\" />\n                    <circle\n                      cx=\"25\"\n                      cy=\"25\"\n                      r=\"22\"\n                      className=\"circle-progress\"\n                      style={{\n                        strokeDasharray: '138',\n                        strokeDashoffset: `${(count / 3) * 138}`,\n                      }}\n                    />\n                  </svg>\n                  <span className=\"count-text\">{count}</span>\n                </div>\n              </div>\n              <p className=\"video-title\">{video.title}</p>\n            </div>\n          </div>\n          <hr />\n          <div className=\"related-videos-section\">\n            <h3 className=\"related-title\">Related Videos</h3>\n            <ul className=\"related-list\">\n              {relatedVideos.map((relatedVideo, index) => (\n                <li key={index}>\n                  <button className=\"related-item\" onClick={() => selectVideoCallback(index)}>\n                    <img className=\"related-thumbnail\" src={relatedVideo.imageUrl} alt={relatedVideo.title} />\n                    <p className=\"related-text\">{relatedVideo.title}</p>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default PlaylistEndScreen;\n", "/* Main Playlist Container */\n.playlist {\n  /* Ensure it wraps on smaller screens */\n  display: inline;\n  position: relative;\n  background-color: #12121263;\n  z-index: 2;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n@media (min-width: 1336px) {\n  .playlist {\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.overlay {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: black;\n  opacity: 0.5;\n  z-index: 1;\n}\n\n.post-video-section {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  padding: 1.5rem 2rem;\n  position: relative;\n  gap: 1rem;\n  padding: 1.5rem 2rem;\n  height: max-content;\n  box-sizing: border-box;\n  z-index: 2;\n  max-width: 1200px;\n}\n\n.post-video-section hr {\n  border: none;\n  background: rgba(255, 255, 255, 0.5);\n  height: 100%;\n  width: 1px;\n}\n\n/* Video Section */\n.video-section {\n  flex: 2;\n}\n\n.video-container {\n  position: relative;\n}\n\n.title {\n  font-size: 2.5rem;\n  font-weight: 500;\n  line-height: 3rem;\n  margin: 0;\n  margin-bottom: 1rem;\n}\n\n.video-wrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.video-container > .video-title {\n  font-size: 1.3rem;\n  font-weight: 600;\n}\n\n.video-thumbnail {\n  width: 100%;\n  display: block;\n}\n\n.video-title {\n  font-size: 1rem;\n  margin-top: 0.5rem;\n  cursor: pointer;\n  color: #ffffff;\n  text-decoration: none;\n  line-height: 1.4;\n  /* Adjusted for better readability */\n  word-wrap: break-word;\n  font-weight: 500;\n  margin-bottom: 0;\n}\n\n.video-title:hover {\n  text-decoration: underline;\n}\n\n/* Countdown Timer */\n.countdown-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 3.75rem;\n  height: 3.75rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.countdown-ring {\n  position: absolute;\n}\n\n.circle-background {\n  fill: none;\n  stroke: rgba(255, 255, 255, 0.2);\n  stroke-width: 0.25rem;\n}\n\n.circle-progress {\n  fill: none;\n  stroke: #00a3dd;\n  stroke-width: 0.25rem;\n  stroke-linecap: round;\n  transition: stroke-dashoffset 1s linear;\n}\n\n.count-text {\n  position: absolute;\n  font-size: 1rem;\n  font-weight: bold;\n  color: #ffffff;\n}\n\n/* Related Videos */\n.related-videos-section {\n  flex: 1;\n  width: 100%;\n}\n\n.related-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n  margin: 0;\n  line-height: 2rem;\n}\n\n.related-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.related-item {\n  display: flex;\n  align-items: start;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.5);\n  width: 100%;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  border-radius: 0;\n  background: none;\n}\n\n.related-item:hover {\n  background: none;\n}\n.related-thumbnail {\n  width: 7rem;\n  object-fit: cover;\n  aspect-ratio: 16 / 9;\n}\n\n.related-text {\n  font-size: 0.9rem;\n  color: white;\n  line-height: 1.4;\n  word-wrap: break-word;\n  max-width: 100%;\n  margin-top: 0.25rem;\n  display: block;\n}\n\n.related-text:hover {\n  text-decoration: underline;\n}\n\n/* Responsive  */\n\n@media (max-width: 768px) {\n  .post-video-section {\n    grid-template-columns: 1fr;\n    margin: auto;\n  }\n\n  .post-video-section h2 {\n    display: none;\n  }\n\n  hr {\n    display: none;\n  }\n\n  .video-section {\n    width: 60%;\n    margin: auto;\n  }\n\n  .related-videos-section {\n    display: none;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useRef", "useState", "MuxPlayer", "NewsTheme", "React", "useEffect", "useState", "playlist_end_screen_default", "PlaylistEndScreen", "video", "relatedVideos", "isVisible", "selectVideoCallback", "timerCallback", "count", "setCount", "useState", "useEffect", "timer", "prev", "React", "playlist_end_screen_default", "relatedVideo", "index", "MuxNewsPlayer", "videoList", "props", "mediaElRef", "useRef", "currentIndex", "setCurrentIndex", "useState", "isEndScreenVisible", "setIsEndScreenVisible", "playerKey", "setPlayerKey", "playVideo", "selectVideo", "index", "React", "MuxPlayer", "NewsTheme", "event", "_a", "prev", "playlist_end_screen_default", "index_default"]
+}

package/dist/themes/news.cjs.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var u=(t,e)=>{for(var l in e)n(t,l,{get:e[l],enumerable:!0})},a=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of r(e))!s.call(t,i)&&i!==l&&n(t,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return t};var c=t=>a(n({},"__esModule",{value:!0}),t);var f={};u(f,{default:()=>d});module.exports=c(f);var w=require("@mux/mux-player/themes/news"),d="news";
+//# sourceMappingURL=news.cjs.js.map

package/dist/themes/news.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes/news.ts"],
+  "sourcesContent": ["'use client';\nimport '@mux/mux-player/themes/news';\nexport default 'news';\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GACA,IAAAI,EAAO,uCACAF,EAAQ",
+  "names": ["news_exports", "__export", "news_default", "__toCommonJS", "import_news"]
+}

package/dist/themes/news.mjs

@@ -0,0 +1,2 @@
+"use client";import"@mux/mux-player/themes/news";var t="news";export{t as default};
+//# sourceMappingURL=news.mjs.map

package/dist/themes/news.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/themes/news.ts"],
+  "sourcesContent": ["'use client';\nimport '@mux/mux-player/themes/news';\nexport default 'news';\n"],
+  "mappings": "aACA,MAAO,8BACP,IAAOA,EAAQ",
+  "names": ["news_default"]
+}