react-icons/md#MdPictureInPicture JavaScript Examples

The following examples show how to use react-icons/md#MdPictureInPicture. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: components.jsx    From reactjs-media with MIT License 5 votes vote down vote up 
SettingsMenu = (props) => {
  const { setting, setsetting, src, setvolumeadjuston, setplayback, video } = useContext(VideoContext)
  const [looping, setlooping] = useState(false)
  function loop(e) {
    setlooping(!looping)
    video.current.loop = !video.current.loop
  }
  function PictureInPicture(e) {
    video.current.requestPictureInPicture()
    if (props.onRequestPictureInPicture) {
      props.onRequestPictureInPicture()
    }
  }
  return (
    <div style={setting === false ? { display: 'none' } : {}} className="settingsmenu">
      <div className="menutop menuitem">
        <span className="icon">
          <IoCloseCircleOutline onClick={(e) => { setsetting(false) }} />
        </span>
        <span className="item">Settings</span>
      </div>
      {props.nodownload ? <></> :
        <a download="video" href={src} className="menuitem">
          <span className="icon">
            <FiDownloadCloud />
          </span>
          <span className="item">Download</span>
        </a>}
      <div onClick={loop} className="menuitem">
        <span className="icon">
          <MdLoop />
        </span>
        {looping ? <span className="item">Stop Loop</span> :
          <span className="item">Loop</span>}
      </div>
      <div onClick={PictureInPicture} className="menuitem">
        <span className="icon">
          <MdPictureInPicture />
        </span>
        <span className="item">MiniPlayer</span>
      </div>
      <div onClick={(e) => { setplayback(true) }} className="menuitem">
        <span className="icon">
          <GiSpeedometer />
        </span>
        <span className="item">Playback Speed</span>
      </div>
      <div onClick={(e) => { setvolumeadjuston(true) }} className="menuitem">
        <span className="icon">
          <FaVolumeUp />
        </span>
        <span className="item">Volume</span>
      </div>
    </div>
  )
}
Example #2
Source File: components.jsx    From reactjs-media with MIT License 5 votes vote down vote up 
ContextMenu = (props) => {
  const { contextmenu, CMposition, Playing, setcontextmenu, src, setplayback, video } = useContext(VideoContext)
  const { left, top } = CMposition
  function PictureInPicture(e) {
    video.current.requestPictureInPicture()
  }
  function play(e) {
    video.current.play()
  }
  function pause(e) {
    video.current.pause()
  }
  function setClipboard() {
    let text = video.current.currentSrc
    navigator.clipboard.writeText(text).then(function () {
    }, function () {
      // eslint-disable-next-line no-restricted-globals
      alert('failed to copy url')
    });
  }
  return (
    <div style={contextmenu === false ? { display: 'none' } : {}} onClick={(e) => { setcontextmenu(!contextmenu) }} className="contextcover">
      <div style={{ marginTop: top, marginLeft: left }} className="contextmenu">
        <div onClick={Playing ? pause : play} className="menuitem">
          {Playing ? <>
            <span className="icon">
              <FaPause />
            </span>
            <span className="item">Pause</span></> :
            <>
              <span className="icon">
                <FaPlay />
              </span>
              <span className="item">Play</span></>}
        </div>
        {props.nodownload ? <></> :
          <a download="video" href={src} className="menuitem">
            <span className="icon">
              <FiDownloadCloud />
            </span>
            <span className="item">Download</span>
          </a>}
        <div onClick={PictureInPicture} className="menuitem">
          <span className="icon">
            <MdPictureInPicture />
          </span>
          <span className="item">MiniPlayer</span>
        </div>
        <div onClick={(e) => { setplayback(true) }} className="menuitem">
          <span className="icon">
            <GiSpeedometer />
          </span>
          <span className="item">Playback Speed</span>
        </div>
        <div onClick={(e) => { setClipboard() }} className="menuitem">
          <span className="icon">
            <MdFlipToBack />
          </span>
          <span className="item">Copy Video Adress</span>
        </div>
      </div>
    </div>
  )
}