React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Custom Video Player

Custom video player built using React and Vite. It is designed to be a simple and lightweight video player that can be easily integrated into any React application. The player supports playing videos from various sources, including YouTube, Vimeo, and local files. It also includes features such as fullscreen mode, theater mode, and captions.

Features

• Plays videos from YouTube, Vimeo, and local files
• Supports captions and subtitles
• Supports fullscreen mode
• Supports theater mode
• Supports volume control
• Supports seeking and scrubbing
• Supports keyboard shortcuts for play, pause, volume, and seeking
• Supports custom poster images
• Supports custom video sources
• Supports custom video controls
• Supports custom video progress bar

Usage

To use the custom video player, simply import the CustomVideoPlayer component and pass in the necessary props.

How to use SVG icons

We can directly use svg icons just like html tags but if we want to use them as a component so we need to use svgr package.

• Without SVGR → SVG is just an image.

• With SVGR → SVG becomes a React component.

For vite

First Install vite-plugin-svgr

npm install --save-dev vite-plugin-svgr

Then add this to your vite.config.js file

import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [svgr()],
})

For Next.js

What we can do it we can directly convert svg to react component and use it in our project.

• First Install svgr-playgroup

import PauseIcon from './Components/Svg/Pause.jsx'

// Then we can use it in our project
<PauseIcon className='w-[25px] lg:w-[30px] md:w-[30px] sm:w-[25px] ' />

This same thing we can use in all frameworks

We can get svg from svg-viewer

Important Functions

• getBoundingClientRect() -

The getBoundingClientRect() method in JavaScript is used to get the size and position of an HTML element relative to the viewport the visible area of the browser window

it return an object with properties such as top, left, width, height, x, y, right, bottom, toJSON(), toString(), valueOf(), and getComputedStyle().