panjareh

1.0.16 • Public • Published

player

Panjareh using aparat and phoenix-video-player to play videos on desktops and tvs.

how it works? detect device from its User Agent string, and render view according to the detected device type.

tech

Player Options

These are the available config options for player.

{
  autoplay: true,
  controls: true,
  fill: true,
  playbackRates: [0.5, 1, 1.25, 1.5],
  language: "fa",
  poster: "",
  sources: [],
  info: { title: null, subTitle: null },
  returnUrl: null,
  html5: {
    nativeTextTracks: isMobileSafari ? true : false,

    // To using phoenix-player hlsjs config is required
    hlsjsConfig: {
      // Put your hls.js config here  
      debug: true,
      enableWorker: true,
      lowLatencyMode: true,
      backBufferLength: 90,
      maxBufferSize: 60 * 1000 * 1000,
      startLevel: 0,
    },
  },

  // To init external plugins if have one
  initPlugins: {
     seekButtons,
     vttThumbnails
  },

  // Customize control bar components
  controlBar: { children: ['playToggle'] },

  pluginOptions: {
    // Put your plugin options config here
  }
}

Plugin Options

These are the available config options for plugins. you can enable these plugins by adding its object to PluginOptions.

Progress Bar Seek Thumbnail

seekThumbnailSrc: null

Seek Forward

seekButtons: {
  forward: 10,
  back: 10,
  forwardIndex: 1,
  backIndex: 1,
}

Next Episode

nextEpisode: {
  showAutoAdvanceButton: true,
  autoAdvanceButtonText: "قسمت بعدی",
  autoAdvance: true,
  // auto advanced button url
  url: "",

  // auto advance button display on certain time
  nextEpisodeDisplayTime: null,
  nextEpisodeDisplayDuration: 10,

  // dialog options that opens from menu
  placementIndex: 9,
  dialogData: {
    title: "",
    description: "",
    url: ``,
  },
  dialogTemplate: ({ title, description, url }) => {
    const container = document.createElement("div");
    container.className = "vjs-next-episode-dialog-content";
    container.style.flexDirection = "row";
    container.style.alignItems = "self-end";
    container.style.width = "420px";
    container.style.padding = "12px 24px";
    
    const img = document.createElement("img");
    img.className = "vjs-next-episode-dialog-poster";
    img.src = url;
    img.style.width = "140px";
    img.style.height = "65px";
    img.style.marginLeft = "24px";
    container.appendChild(img);

    const episodeContent = document.createElement("div");
    episodeContent.className = "vjs-next-episode-content";
    episodeContent.style.display = "flex";
    episodeContent.style.flexDirection = "column";
    episodeContent.style.justifyContent = "end";
    episodeContent.style.textAlign = "right";
    container.appendChild(episodeContent);

    const titleEl = document.createElement("span");
    titleEl.className = "vjs-next-episode-dialog-title";
    titleEl.innerHTML = title;

    episodeContent.appendChild(titleEl);

    const descriptionEl = document.createElement("span");
    descriptionEl.className = "vjs-next-episode-dialog-description";
    descriptionEl.innerHTML = description;

    episodeContent.appendChild(descriptionEl);

    return container;
  },
}

Skip Button

skipButton: {
  from: null, // From seconds
  to: null, // To seconds
  text: "skipOpeningCredits",
  position: "bottom-right",
  offsetH: 46,
  offsetV: 167,
}

Traffic Usage Label

trafficUsage: {
  title: null,
  message: null,
  expireTime: 5, // Minute
  position: "top-right",
  offsetH: 30,
  offsetV: 15,
}

Subtitle Settings

subtitleSettings: {}

Season Playlist

seasonPlaylist: {
  seasons: [1], // Array of number
  getEpisode: (season, page, callback) => {
    // Calling api here and use callback in response
    callback({
      alias: "",
      duration: 0,
      link: "",
      part: 0,
      season: 0,
      thumbnail: "",
      title: null,
    });
  },
}

Vote

vote: {
  submitVote: ({ likeStatus, callback }) => {
    return { likeStatus, callback };
  }, // LikeStatus 1 equals to liked and 2 equals to disliked
  from: null,
  to: null,
  position: "bottom-right",
  offsetH: 46,
  offsetV: 167,
}

Marker

Marker on progress bar

markers: {
  markerTip: {
    display: false,
    skip: true,
  },
  onMarkerReached: (marker, index) => {
    console.log(marker, index);
  },
  onMarkerSkipZone: (marker, index) => {
    console.log("onMarkerSkipZone", marker, index);
  },
  markers: [{ time: null, duration: null }],
}

Quality Selector

Default ranges for quality are:

qualitySelector: {
  qualities: [
    {
      quality: 144,
      label: 'UltraLow'
    },
    {
      quality: 240,
      label: 'VeryLow'
    },
    {
      quality: 360,
      label: 'Low'
    },
    {
      quality: 480,
      label: 'Medium'
    },
    {
      quality: 570,
      label: 'High'
    },
    {
      quality: 720,
      label: 'VeryHigh',
      symbol: 'HD'
    },
    {
      quality: 1080,
      label: 'UltraHigh',
      symbol: 'FHD'
    },
    {
      quality: 1440,
      label: 'Excellent',
      symbol: 'QHD'
    },
    {
      quality: 2304,
      label: 'VeryExcellent',
      symbol: 'UHD'
    }
  ],
}

Collect Data

collectData: {
  token: "",
}

Readme

Keywords

Package Sidebar

Install

npm i panjareh

Weekly Downloads

1

Version

1.0.16

License

ISC

Unpacked Size

499 kB

Total Files

68

Last publish

Collaborators

  • xessam