ayon-player

The standard, extensible media player for AYON

Installation

Currently the package can be installed only via Yarn git dependencies:

yarn add ssh://[email protected]/ynput/ayon-player#<commit hash>

Where <commit hash> is the target commit you want to add.

Usage

You can run the demo app using yarn dev.

To include the Player in your app, you need to set up a couple of context providers, then pass a Clip object to the Player:

import { Provider } from "react-redux"
import { GlobalProvider } from "@ynput/ayon-frontend-shared/context"

import { Player } from "@ynput/ayon-player"
import { Clip, ClipType } from "@ynput/ayon-player/model"

const clip: Clip = {
  url: "https://example.com/path/to/my/video.mp4",
  // get the following info from video metadata or elsewhere
  fps: 24,
  width: 1920,
  height: 1080,
  duration: 10,
  codec: "h264",

  position: 0,
  fileId: "asdf",
  listItemId: "1",
  label: "Test Clip",
  type: ClipType.VIDEO,

  context: {
    path: "test/path/to/clip",
    versionName: "version 1",
    versionStatus: "In Progress",
    versionAuthor: "john.doe",
    versionAuthorFullName: "John Doe",
    versionId: "version-id",
    productFolderId: "product-folder-id",
    productName: "My Product",
    productId: "product-id",
    productType: "product-type",
    versionAttributes: {},
    productAttributes: {},
    taskAttributes: {},
  }
}

export default function MyApp() {
  const containerRef = useRef<HTMLElement | null>(null)

  return (
    <div ref={containerRef}>
      <Provider store={store}>
        <GlobalProvider>
          <Player
            clips={[clip]} // note: pass clip in an array (needed for premium multi-clip playback)
            user={{
              name: "john.doe",
            }}
            // ref needed for Theatre mode
            theatreContainerRef={containerRef}
            context={{
              router: { useLocation, useNavigate, useParams, useSearchParams },
            }}
            showHeader={false}
            showReviewables={false}
          />
        </GlobalProvider>
      </Provider>
    </div>
  )
}