zoomable - 1.12 KB

Basic Usage

import { createPlayback } from "@headlessplayback/core"
import { zoomablePlaybackPlugin } from "@headlessplayback/zoomable-plugin"
createPlayback.use(zoomablePlaybackPlugin)

const { activate, playbackActions } = createPlayback({
  id: "playback",
})

activate()
playbackActions.createZoomablePlayback({
  // Reference to the playback's container element
  container,
})

Type Declaration

interface CustomPlaybackActions {
  createZoomablePlayback: (arg: {
    container: HTMLElement
    options?: ZoomableVideoOptions
  }) => void
  setEnableZoom: (arg: { enableZoom: boolean }) => void
  setCurrentZoom: (arg: { currentZoom: number }) => void
}

type ZoomableVideoOptions = {
  maxZoom?: number
  wheelZoomRatio?: number
}