linear-player

PreviousNext

Modern seamless flat linear.app Media Player

Docs
limeplayblock

Preview

Loading preview…
registry/default/blocks/linear-player/components/media-player.tsx
import type shaka from "shaka-player"

import React from "react"

import { cn } from "@/lib/utils"
import { BottomControls } from "@/registry/default/blocks/linear-player/components/bottom-controls"
import { MediaElement } from "@/registry/default/blocks/linear-player/components/media-element"
import { PlayerHooks } from "@/registry/default/blocks/linear-player/components/player-hooks"
import { CaptionsContainer } from "@/registry/default/ui/captions"
import { FallbackPoster } from "@/registry/default/ui/fallback-poster"
import { LimeplayLogo } from "@/registry/default/ui/limeplay-logo"
import { MediaProvider } from "@/registry/default/ui/media-provider"
import * as Layout from "@/registry/default/ui/player-layout"
import { RootContainer } from "@/registry/default/ui/root-container"

import { ASSETS } from "../lib/playlist"

export interface LinearMediaPlayerProps {
  className?: string
  config?: shaka.extern.PlayerConfiguration
  debug?: boolean
  src?: string
}

export const LinearMediaPlayer = React.forwardRef<
  HTMLDivElement,
  LinearMediaPlayerProps
>(({ className, config, debug = false, src }, ref) => {
  const finalConfig = src && config ? config : ASSETS[0].config
  const finalSrc = src && src ? src : ASSETS[0].src

  return (
    <MediaProvider debug={debug}>
      <RootContainer
        className={cn(
          `
            m-auto w-full
            md:min-w-80
          `,
          className
        )}
        height={720}
        ref={ref}
        width={1280}
      >
        <Layout.PlayerContainer>
          <FallbackPoster className="bg-black">
            <LimeplayLogo />
          </FallbackPoster>
          <MediaElement config={finalConfig} src={finalSrc} />
          <PlayerHooks />
          <Layout.ControlsOverlayContainer />
          <Layout.ControlsContainer className="pb-6">
            <CaptionsContainer />
            <BottomControls />
          </Layout.ControlsContainer>
        </Layout.PlayerContainer>
      </RootContainer>
    </MediaProvider>
  )
})

LinearMediaPlayer.displayName = "LinearMediaPlayer"

Installation

npx shadcn@latest add @limeplay/linear-player

Usage

import { LinearPlayer } from "@/components/linear-player"
<LinearPlayer />