Here is My code
import { useCallback, useEffect, useState, useRef } from "react";
import videojs from "video.js";
import "videojs-contrib-quality-levels"; // videoJs Quality levels **
import "videojs-hls-quality-selector"; // videojs Quality Selector **
const Player = (props) => {
const { source, options, onReady } = props;
const [videoSource, setVideoSource] = useState(source);
const videoRef = useRef(null);
const playerRef = useRef(null);
useEffect(() => {
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
const player = (playerRef.current = videojs(videoElement, options, () => {
onReady && onReady(player);
}));
console.log(player);
player.qualityLevels(); // I get error in this line that qualityLevels is not a function.
}
}, [options]);
useEffect(() => {
setVideoSource(source);
}, [source]);
useEffect(() => {
return () => {
if (playerRef.current) {
playerRef.current.dispose();
playerRef.current = null;
}
};
}, []);
return (
<>
<h1>The implementation below is using react functions</h1>
<div data-vjs-player>
<video ref={videoRef} className="video-js" playsInline />
<source src={videoSource} type="application/x-mpegURL" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.1.0/videojs-contrib-quality-levels.min.js"></script>
</>
);
};
export default Player;
The error I get is that qualityLevels is not a function for this statement: player.qualityLevels();
The following snippet is from the file videojs-contrib-quality-levels:
declare module 'video.js' {
interface VideoJsPlayer {
qualityLevels: {
VERSION: string;
(): QualityLevelList;
};
}
}
I should mention that I am not getting any error for my imports or anything. The only error I get is that qualitylevels is not a function.
Here is my package.json:
{
"name": "vinama",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch",
"cypress": "cypress open",
"cypress:headless": "cypress run"
},
"dependencies": {
"antd": "^4.19.5",
"axios": "^0.24.0",
"classnames": "^2.3.1",
"formik": "^2.2.9",
"hls.js": "^1.1.1",
"jalali-moment": "^3.3.10",
"next": "12.0.4",
"nprogress": "^0.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-query": "^3.34.16",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"swiper": "^8.0.0",
"swr": "^1.2.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/runtime": "7.13.8",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^12.1.2",
"@types/node": "16.11.7",
"@types/nprogress": "^0.2.0",
"@types/react": "17.0.35",
"@types/react-slick": "^0.23.7",
"@types/slick-carousel": "^1.6.37",
"@types/video.js": "^7.3.33",
"autoprefixer": "^10.4.0",
"babel-jest": "^27.3.1",
"babel-loader": "^8.2.3",
"cypress": "^9.0.0",
"eslint": "7",
"eslint-config-next": "12.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.3.1",
"postcss": "^8.3.11",
"react-test-renderer": "^17.0.2",
"sass": "^1.43.4",
"tailwindcss": "^2.2.19",
"typescript": "4.4.4",
"video.js": "7.15.4",
"videojs-contrib-ads": "6.9.0",
"videojs-contrib-quality-levels": "^2.1.0",
"videojs-hls-quality-selector": "^1.1.4",
"videojs-playlist": "4.3.1",
"videojs-thumbnail-sprite": "0.1.1"
}
}
How can I find where the issue is?