/** @format */

import React from "react";
import "../../VideoJs/style.css";
import VideoPlayer from "../../VideoJs/index";
import "video.js/dist/video-js.css";
import { Parser } from "m3u8-parser";

export const Player = ({ src, type }) => {
  var manifest = [
    "#EXTM3U",
    "#EXT-X-VERSION:3",
    "#EXT-X-TARGETDURATION:6",
    "#EXT-X-MEDIA-SEQUENCE:0",
    "#EXT-X-DISCONTINUITY-SEQUENCE:0",
    "#EXTINF:6,",
    "0.ts",
    "#EXTINF:6,",
    "1.ts",
    "#EXTINF:6,",
    "2.ts",
    "#EXT-X-ENDLIST",
  ].join("\n");

  var parser = new Parser();

  parser.push(manifest);
  parser.end();

  var parsedManifest = parser.manifest;

  const videoJsOptions = {
    autoplay: false,
    playbackRates: [0.5, 1, 1.25, 1.5, 2],
    controls: true,
    width: "800px",
    sources: [
      {
        src: src,
        type: type,
      },
    ],
    manifest: parsedManifest,
    PictureInPictureWindow: false,
    plugins: {
      seekButtons: {
        qualityLevels: {},
        hlsQualitySelector: {},
        forward: 10,
        back: 10,
      },
    },
    userActions: {
      hotkeys: true,
    },
  };
  return (
    <div className='App'>
      <VideoPlayer {...videoJsOptions} />;
    </div>
  );
};

// export default Player;