sindresorhus / screenfull

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
https://sindresorhus.com/screenfull
MIT License
7.08k stars 698 forks source link

double clicking on full screen request an error occurred "Permissions check failed" #223

Closed deeit789 closed 1 year ago

deeit789 commented 1 year ago

I want to double clicking toggle fullscreen but error. Help me fix error "Permissions check failed" when I double clicking player using DPlayer Thanks all!

Error:

index.js:89 Uncaught (in promise) TypeError: Permissions check failed
    at index.js:89:1
    at new Promise (<anonymous>)
    at Object.request (index.js:81:1)
    at Object.toggle (index.js:118:1)
    at handleDoubleClick (index.js:70:1)
    at HTMLDivElement.<anonymous> (index.js:109:1)

This is my source code:

import React, { useEffect, useRef, useState } from 'react';
import DPlayer from 'dplayer';
import Hls from 'hls.js';
import screenfull from 'screenfull';

const DPlayerComponent = () => {
  const playerRef = useRef(null);

  const handleDoubleClick = (dp) => {
    const playerContainer = dp.container;
    if (playerContainer && screenfull.isEnabled) {
      screenfull.toggle(playerContainer);
    }
  };

  const createInstancePlayer = () => {
    const dp = new DPlayer({
      container: playerRef.current,
      autoplay: true,
      preload: 'metadata',
      live: true,
      airplay: true,
      volume: 0.7,
      loop: true,
      hotkey: true,
      theme: '#feb307',
      video: {
        type: 'customHls',
        url: videoUrl,
        thumbnails: bgVideo,
        customType: {
          customHls: function (video, player) {
            if (Hls.isSupported()) {
              const hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
              video.src = videoUrl;
            }
          }
        },
        customTypeEnabled: true
      }
    });

    return dp;
  };

  useEffect(() => {
    const dp = createInstancePlayer();
    playerRef.current.addEventListener('dblclick', () => handleDoubleClick(dp));

    return () => {
      dp.destroy();
    };
  }, []);

  return <div className="h-full" ref={playerRef} />;
};

export default DPlayerComponent;