react-tv-player/dist/react-tv-player.js

A React media player component for TV devices. With custom UI and arrow-key navigation, it can play a variety of URLs like file paths, HLS/DASH streams and even YouTube & Vimeo links directly. Packaged as an npm library for easy integration.

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.tv-player-ui{z-index:2;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;padding:2.0833333333vw 2.6041666667vw}.tv-player-ui__cover{transition:opacity .3s;width:100%;height:100%;opacity:1;background:linear-gradient(#0000,#000000d9 78%);position:absolute;top:0;left:0;z-index:-1}.tv-player-ui__cover.hide{opacity:0}.tv-player-ui__cover.with-top-cover{background:linear-gradient(#000000f7,#000000f7 6%,#0009 30%,#00000094,#0009 40%,#000000fa 78%)}.tv-player-ui__cover.light-cover{background:linear-gradient(#0000,#000000d9 70%)}@media screen and (max-width: 1200px) and (orientation: landscape){.tv-player-ui__cover.light-cover{background:linear-gradient(#0000,#000000e6 60%)}}.tv-player-ui .metadata-wrapper{width:84%;text-align:center;padding:.2083333333vw 0;margin:0 auto;pointer-events:none;animation:fadeInAnim ease-in-out .3s forwards}.tv-player-ui .metadata{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fafafa;padding:0 2.6041666667vw;pointer-events:none;line-height:1.4}.tv-player-ui .metadata--title{font-size:3.2291666667vw;font-weight:800}.tv-player-ui .metadata--subTitle{font-size:1.4583333333vw;font-weight:400}@media screen and (max-width: 1200px){.tv-player-ui .metadata--title{font-size:4.1666666667vw}.tv-player-ui .metadata--subTitle{font-size:2.0833333333vw}}@media screen and (max-width: 600px){.tv-player-ui .metadata--title{font-size:6.25vw}.tv-player-ui .metadata--subTitle{font-size:3.125vw}}.tv-player-ui .buttons{padding:2.0833333333vw 2.6041666667vw;height:3.125vw;min-height:60px;display:flex;align-items:center;justify-content:center;gap:2.5vw;transition:all .3s;border-top:.5px solid rgba(255,255,255,0);pointer-events:none}.tv-player-ui .buttons>*{display:flex;gap:3vw}.tv-player-ui .buttons__left{margin-right:auto}.tv-player-ui .buttons__center{position:absolute}.tv-player-ui .buttons__right{margin-left:auto}.tv-player-ui .buttons button{position:relative;pointer-events:auto;box-sizing:border-box;border-radius:50%;border:2px solid transparent;background-color:transparent;color:#fff;width:3.125vw;height:3.125vw;min-width:54px;min-height:54px;cursor:pointer;transition:all .3s;outline:none}.tv-player-ui .buttons button small{position:absolute;transform:translateY(50px);left:-50%;width:200%;opacity:0;transition:all .3s;font-size:18px;z-index:1}@media screen and (min-width: 1600px){.tv-player-ui .buttons button small{transform:translateY(54px);font-size:20px}}.tv-player-ui .buttons button:disabled{opacity:.5;pointer-events:none}.tv-player-ui .buttons button.focused{border-color:#fafafa;outline:none}.tv-player-ui .buttons button.focused small{opacity:1}@media screen and (max-width: 600px){.tv-player-ui .buttons button{min-width:39px;min-height:39px}.tv-player-ui .buttons button.focused small{opacity:0}.tv-player-ui .buttons button svg{font-size:16px!important}}.tv-player-ui .buttons button.selected-dot{position:relative}.tv-player-ui .buttons button.selected-dot:before{content:".";position:absolute;bottom:-4px;left:38%;font-size:40px}.tv-player-ui .buttons button.selected-fill{background-color:#323232}.tv-player-ui .buttons button svg{font-size:24px}.tv-player-ui .buttons button svg.fa-play{padding-left:3px}@media screen and (max-width: 600px){.tv-player-ui .buttons button svg.fa-play{padding-left:2px}}.tv-player-ui .buttons button svg.fa-backward{margin-left:-3px}.tv-player-ui .buttons button svg.fa-forward{margin-left:3px}.tv-player-ui .buttons button svg.fa-info{margin-bottom:2px;font-size:16px}.tv-player-ui .buttons button svg.fa-volume-xmark{margin-left:-2px}.tv-player-ui .buttons button svg.fa-circle-info{font-size:28px}.tv-player-ui .buttons button svg.fa-circle-info path{fill:#ffffffe6}.tv-player-ui .buttons button svg.fa-github{font-size:34px}.tv-player-ui .progress-bar{padding:0 calc(2.6041666667vw - 4px);display:flex;justify-content:center;align-items:center;height:60px;gap:1.1458333333vw;transition:opacity .3s}.tv-player-ui .progress-bar.hide{opacity:0}.tv-player-ui .progress-bar:not(.hide){animation:fadeInAnim ease-in-out .3s forwards}.tv-player-ui .progress-bar .time{color:#fafafa;font-size:18px;font-weight:600;min-height:24px;min-width:70px;text-align:left;display:flex;justify-content:center;align-items:center}.tv-player-ui .progress-bar .time--duration{text-align:right}@media screen and (max-width: 600px){.tv-player-ui .progress-bar .time{font-size:14px}}@media screen and (min-width: 1600px){.tv-player-ui .progress-bar .time{font-size:20px}}.tv-player-ui .progress-bar .bar-wrapper{flex:1;cursor:pointer}.tv-player-ui .progress-bar .bar-wrapper .bar{position:relative;height:.4166666667vw;border-radius:.2083333333vw;background-color:#191919;margin:.625vw 0}@media screen and (max-width: 600px){.tv-player-ui .progress-bar .bar-wrapper .bar{height:.625vw}}.tv-player-ui .progress-bar .bar-wrapper .bar .fill{background-color:#fafafa;position:absolute;left:0;height:100%;border-radius:.2083333333vw;opacity:.8;transition:all .3s}.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button{background-color:#fafafa;position:absolute;border-radius:50%;width:.8333333333vw;height:.8333333333vw;padding:.2083333333vw;top:-.4166666667vw;margin:.2083333333vw .2083333333vw .2083333333vw -.8333333333vw;border:.2083333333vw solid transparent;transition:all .3s;transform:scale(1.2);z-index:1;cursor:pointer;pointer-events:none}@media screen and (max-width: 1200px){.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button{width:1.25vw;height:1.25vw;top:-.6770833333vw}}@media screen and (max-width: 600px){.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button{width:1.6666666667vw;height:1.6666666667vw}}.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button:before{content:"";position:absolute;top:-.5208333333vw;right:-.5208333333vw;bottom:-.5208333333vw;left:-.5208333333vw;border:.1041666667vw solid transparent;border-radius:50%;transition:all .3s}.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button.focused,.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button:hover{transform:scale(1.6)}.tv-player-ui .progress-bar .bar-wrapper .bar .progress-bar-button.focused:before{border-color:#fafafa}.tv-player-ui .progress-bar .bar-wrapper.focused .progress-bar-button,.tv-player-ui .progress-bar .bar-wrapper:hover .progress-bar-button{transform:scale(1.6);opacity:1}@keyframes fadeInAnim{0%{opacity:0}to{opacity:1}}.tv-player{background:#000;height:100vh;position:relative}.tv-player :focus{outline:0;outline-color:transparent;outline-style:none}.tv-player>*{position:absolute;top:0;left:0}.tv-player video{background-color:#000}img.yt-preview{object-position:center;object-fit:cover;display:none}img.yt-preview.show{display:block}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
import { T as r, b as s, u as y, c as T } from "./index-r8XrYpcu.js";
export {
  r as TVPlayer,
  s as TVPlayerUI,
  y as useTVPlayerActivity,
  T as useTVPlayerStore
};