How to add a custom button to my player?

[kodeyeen]

I want to add a custom button along with other control buttons, but I can't find any examples. I'm using web components.

[mihar-22]

Need more information, custom button to a custom layout or...? If you're trying to add it to one of our layouts (Default/Plyr) then you can only do that in React at the moment. Hopefully soon we can make this feature available to Web Component users.

[DamianGlowala]

+1 for being able to add specific elements to the layout using web components and apply our own Tailwind CSS classes accordingly

[yangwawa0323]

I want to add previous and next buttons for play list of video.
Here is my code has been implemented. but I have no idea to add buttons to control pannel.

import '@vidstack/react/player/styles/base.css';

import { useEffect, useRef, useState } from 'react';

import { MediaPlayer, MediaProvider, Poster, type MediaPlayerInstance } from '@vidstack/react';
import styled from 'styled-components';

import { VideoLayout } from './components/layouts/video-layout';

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  align-items: center;
`;

const ButtonContainer = styled.div`
  display: flex;
  gap: 12px;
`;

const Button = styled.button`
  background-color: #6363f7f7;
  padding: 6px 12px;
  color: white;
  border-radius: 4px;

  &:hover {
    filter: brightness(135%);
  }
  &:disabled {
    filter: brightness(60%);
    color: #c1c1c1;
  }
`;

type SourceType = {
  src: string;
  type: 'video/mp4';
};

const sourceList: Array<SourceType> = [
  {
    src: 'https://cdn.pixabay.com/video/2019/10/18/28052-367411298_large.mp4',
    type: 'video/mp4',
  },
  {
    src: 'https://videos.pexels.com/video-files/5192719/5192719-hd_1280_720_24fps.mp4',
    type: 'video/mp4',
  },
  { src: 'https://cdn.pixabay.com/video/2016/04/18/2849-163375551_large.mp4', type: 'video/mp4' },
];

export function Player() {
  let player = useRef<MediaPlayerInstance>(null);

  const [src, setSrc] = useState<SourceType>(sourceList[0]);
  const [srcIndex, setSrcIndex] = useState<number>(0);

  useEffect(() => {
    // Subscribe to state updates.
    return player.current!.subscribe(({ paused, viewType }) => {
      // console.log('is paused?', '->', state.paused);
      // console.log('is audio view?', '->', state.viewType === 'audio');
    });
  }, []);

  const changeVideoIndex = (toward: number) => {
    setSrcIndex((preSrcIndex) => {
      let towardIndex = preSrcIndex + toward;
      let index =
        towardIndex <= 0
          ? 0
          : towardIndex >= sourceList.length
            ? sourceList.length - 1
            : towardIndex;
      console.log(`Index: ${index}`);
      setSrc((_) => sourceList[index]);
      player.current?.dispatch(new CustomEvent('source-change'));
      player.current?.dispatch(new CustomEvent('media-play-request'));
      return index;
    });
  };

  return (
    <Wrapper>
      <ButtonContainer>
        <Button disabled={srcIndex === 0} onClick={() => changeVideoIndex(-1)}>
          Previous
        </Button>
        <Button disabled={srcIndex >= sourceList.length - 1} onClick={() => changeVideoIndex(+1)}>
          Next
        </Button>
      </ButtonContainer>
      <MediaPlayer
        className="w-full aspect-video bg-slate-900 text-white font-sans overflow-hidden rounded-md ring-media-focus data-[focus]:ring-4"
        title="Sprite Fight"
        src={src}
        crossOrigin
        playsInline
        ref={player}
        autoPlay
      >
        <MediaProvider>
          <Poster
            className="absolute inset-0 block h-full w-full rounded-md opacity-0 transition-opacity data-[visible]:opacity-100 object-cover"
            src="https://files.vidstack.io/sprite-fight/poster.webp"
            alt="Girl walks into campfire with gnomes surrounding her friend ready for their next meal!"
          />
          {/* {textTracks.map((track) => (
            <Track {...track} key={track.src} />
          ))} */}
        </MediaProvider>

        <VideoLayout thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt" />
      </MediaPlayer>
    </Wrapper>
  );
}