Multiple qulity selection menu

[den4ikr]

I have a modal window, where the flow player component is displayed. When the modal window was closed and opened multiple times, there are multiple qulity selection menus. All state of modal comopnent is cleared, except quantity of quality menus

[bbbo]

You need to destroy the player to thoroughly clean up everything: https://flowplayer.com/blog/flowplayer-and-single-page-applications

[den4ikr]

It says thats its not a function. I use const player = flowplayer(HLSPlugin, QSELlugin) to create an instance of player. When i use player.destroy(). Its says that its not a function. Idk how to handle it. There is only one line of code on docs about player destruction.

пн, 29 авг. 2022 г. в 13:09, Bernd Backhaus @.***>:

You need to destroy the player to thoroughly clean up everything: https://flowplayer.com/blog/flowplayer-and-single-page-applications

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1230079060, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWRYOZ7K4DQJTCQKTULV3SD5LANCNFSM57W6VX4A . You are receiving this because you authored the thread.Message ID: @.***>

[rashadatjou]

@den4ikr I have a couple of questions before we can resolve the issue you are facing:

1. What version of the flowplayer/react-player are you using?
2. Can you send us a code snippet of what you are trying to achieve?

[den4ikr]

I use 1.0.1 version of flowplayer/react-flowplayer.

[image: image.png] So, I am trying to kill player when my component unmounts. But i got an error that player.destroy() is not a function. Because if that i have multiple quality selection menu when i open player multiple times

пн, 29 авг. 2022 г. в 15:00, Mehdi @.***>:

@den4ikr https://github.com/den4ikr I have a couple of questions before we can resolve the issue you are facing:

1. What version of the flowplayer/react-player are you using?
2. Can you send us a code snippet of what you are trying to achieve?

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1230189367, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWSAK3FF6FVNLBCH3YTV3SQ4JANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[bbbo]

please update to v 1.1.1 before we continue with the issue.

[den4ikr]

I have updated flow player to 1.1.1 version. And still i am getting this error

пн, 29 авг. 2022 г. в 16:33, Bernd Backhaus @.***>:

please update to v 1.1.1 before we continue with the issue.

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1230314749, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWUZVTTCTD776R3M5ZTV3S33PANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[rashadatjou]

Can you please try the same thing but with the useFlowplayer hook (to use the player API). I have updated the example on our docs so you can see how to handle it with more detail.

[den4ikr]

[image: image.png] So i updated hook and added useFlowplayer. But destroy function doesnt work. I still have multiple quality selection menus. So i think that the player doesnt get killed.

вт, 30 авг. 2022 г. в 11:12, Mehdi @.***>:

Can you please try the same thing but with the useFlowplayer hook (to use the player API). I have updated the example https://docs.flowplayer.com/player/components/react#flowplayer-react-example on our docs so you can see how to handle it with more detail.

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1231312879, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWSWN4AXO7CWTNUUR2LV3W66BANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[den4ikr]

[image: image.png] I also have this error, idk if its player error or its something else. But i get it when destroy function is called

вт, 30 авг. 2022 г. в 11:23, Roman Danik @.***>:

[image: image.png] So i updated hook and added useFlowplayer. But destroy function doesnt work. I still have multiple quality selection menus. So i think that the player doesnt get killed.

вт, 30 авг. 2022 г. в 11:12, Mehdi @.***>:

Can you please try the same thing but with the useFlowplayer hook (to use the player API). I have updated the example https://docs.flowplayer.com/player/components/react#flowplayer-react-example on our docs so you can see how to handle it with more detail.

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1231312879, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWSWN4AXO7CWTNUUR2LV3W66BANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[bbbo]

Then is's time to post your code ;)

[den4ikr]

okay, where can i post is? Just send it here?

вт, 30 авг. 2022 г. в 11:27, Bernd Backhaus @.***>:

Then is's time to post your code ;)

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1231329557, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWW3FA5UYTWV7XVXN4LV3XAVZANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[bbbo]

yes

[den4ikr]

import { Box, Dialog, Grid, IconButton } from @./material'; import XMarkIcon from 'components/icons/XMarkIcon'; import React, { useEffect, useRef, useState } from 'react'; // eslint-disable-next-line // @ts-ignore import Flowplayer, { useFlowplayer } from @./react-flowplayer'; import @./player/flowplayer.css'; // eslint-disable-next-line // @ts-ignore import HLSPlugin from @./player/plugins/hls'; // eslint-disable-next-line // @ts-ignore import QSELlugin from @./player/plugins/qsel'; import flowplayer from @./player'; import colors from 'theme/colors'; // eslint-disable-next-line // @ts-ignore import './styles.css';

interface Props { open: boolean; setOpen(v: boolean): void; src: string; }

// eslint-disable-next-line type CallBack = (node: any) => void;

const PlayerDialog: React.FC = (props: Props) => { const { open, setOpen, src } = props;

const playerRef = useRef(null); const [isShowCloseIcon, setIsShowCloseIcon] = useState(false);

const ref = useRef(); const playerApi = useFlowplayer(ref);

useEffect(() => { flowplayer(HLSPlugin, QSELlugin);

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

return ( <Dialog open={open} onClose={() => setOpen(false)} fullScreen sx={{ position: 'relative', zIndex: 10000, top: 0, left: 0 }}

<Box sx={{ background: colors.black, height: '100vh', position: 'relative', objectFit: 'cover', overflow: 'hidden', width: '100%', zIndex: 10000, }}

<Flowplayer autoplay={true} stream height='0px' src={src} token={process.env.REACT_APP_FLOW_PLAYER_TOKEN} ref={ref} qsel={{ labels: [false], }} preferredPeakBitRate={720_000} /> ); };

export default PlayerDialog;

вт, 30 авг. 2022 г. в 11:34, Bernd Backhaus @.***>:

yes

— Reply to this email directly, view it on GitHub https://github.com/flowplayer/react-flowplayer/issues/33#issuecomment-1231337340, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANKBMWTI7DXI4MGIZFX2CHDV3XBQLANCNFSM57W6VX4A . You are receiving this because you were mentioned.Message ID: @.***>

[rashadatjou]

Hi @den4ikr please try to move the flowplayer(HLSPlugin, QSELlugin); outside of the useEffect. As flowplayer is instantiated once per window.

Example

import HLSPlugin from '***@***.***/player/plugins/hls';
import QSELlugin from '***@***.***/player/plugins/qsel';
import flowplayer from '***@***.***/player';

flowplayer(HLSPlugin, QSELlugin);

const PlayerDialog: React.FC<Props> = (props: Props) => {
  const ref = useRef<HTMLDivElement>();
  const playerApi = useFlowplayer(ref);

  .
  .
  .

  useEffect(() => {
    return () => {
      if (playerApi) playerApi.destroy()
    }
  }, [playerApi])

  .
  .
  .
}

[den4ikr]

Thank you very much. It works correctly now. Thanks!!!!!!