🚀 Technologies and tools used:

• [x] React.Js
• [x] Next.js
• [x] Typescript
• [x] Styled-components
• [x] Eslint
• [x] Lottie
• [x] Plyr
• [x] Hls.js

🗂 Project structure

.
├── public
│   ├── assets
│   │   ├── poster.svg
│   │   └── preview.png
│   ├── video
│   │   ├── 720p_000.mp4
│   │   ├── 720p_001.mp4
│   │   ├── 720p_002.mp4
│   │   ├── 720p_003.mp4
│   │   ├── 720p_004.mp4
│   │   ├── 720p_005.mp4
│   │   ├── 720p_006.mp4
│   │   ├── 720p_007.mp4
│   │   └── 720p.m3u8
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── animations
│   │       ├── 404-error.json
│   │       └── 500-error.json
│   ├── components
│   │   ├── Head
│   │   │   ├── Head.tsx
│   │   │   └── index.ts
│   │   ├── HotToast
│   │   │   ├── HostToast.tsx
│   │   │   └── index.tsx
│   │   ├── LottieAnimation
│   │   │   ├── index.tsx
│   │   │   ├── LottieAnimation.tsx
│   │   │   └── styles.ts
│   │   └── Plyr
│   │       ├── index.ts
│   │       ├── Plyr.tsx
│   │       └── styles.ts
│   ├── pages
│   │   ├── api
│   │   │   └── v1
│   │   │       └── [slug].ts
│   │   ├── 404.tsx
│   │   ├── 500.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── styles
│   │   ├── pages
│   │   │   ├── error
│   │   │   │   ├── index.ts
│   │   │   │   └── styles.ts
│   │   │   └── index
│   │   │       └── styles.ts
│   │   ├── themes
│   │   │   └── dark.ts
│   │   └── global.ts
│   └── @types
│       ├── env.config.d.ts
│       ├── index.d.ts
│       ├── lottie-animation.d.ts
│       └── styled.d.ts
├── next.config.js
├── next-env.d.ts
├── package.json
└── tsconfig.json