-
-
Save adrianhajdin/9725da94fa1f08c9668d856d3c94dd47 to your computer and use it in GitHub Desktop.
import MusicNoteIcon from '@mui/icons-material/MusicNote'; | |
import HomeIcon from '@mui/icons-material/Home'; | |
import CodeIcon from '@mui/icons-material/Code'; | |
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo'; | |
import SportsEsportsIcon from '@mui/icons-material/SportsEsports'; | |
import LiveTvIcon from '@mui/icons-material/LiveTv'; | |
import SchoolIcon from '@mui/icons-material/School'; | |
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural'; | |
import CheckroomIcon from '@mui/icons-material/Checkroom'; | |
import GraphicEqIcon from '@mui/icons-material/GraphicEq'; | |
import TheaterComedyIcon from '@mui/icons-material/TheaterComedy'; | |
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter'; | |
import DeveloperModeIcon from '@mui/icons-material/DeveloperMode'; | |
export const logo = 'https://i.ibb.co/s9Qys2j/logo.png'; | |
export const categories = [ | |
{ name: 'New', icon: <HomeIcon />, }, | |
{ name: 'JS Mastery', icon: <CodeIcon />, }, | |
{ name: 'Coding', icon: <CodeIcon />, }, | |
{ name: 'ReactJS', icon: <CodeIcon />, }, | |
{ name: 'NextJS', icon: <CodeIcon />, }, | |
{ name: 'Music', icon: <MusicNoteIcon /> }, | |
{ name: 'Education', icon: <SchoolIcon />, }, | |
{ name: 'Podcast', icon: <GraphicEqIcon />, }, | |
{ name: 'Movie', icon: <OndemandVideoIcon />, }, | |
{ name: 'Gaming', icon: <SportsEsportsIcon />, }, | |
{ name: 'Live', icon: <LiveTvIcon />, }, | |
{ name: 'Sport', icon: <FitnessCenterIcon />, }, | |
{ name: 'Fashion', icon: <CheckroomIcon />, }, | |
{ name: 'Beauty', icon: <FaceRetouchingNaturalIcon />, }, | |
{ name: 'Comedy', icon: <TheaterComedyIcon />, }, | |
{ name: 'Gym', icon: <FitnessCenterIcon />, }, | |
{ name: 'Crypto', icon: <DeveloperModeIcon />, }, | |
]; | |
export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png'; | |
export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A'; | |
export const demoVideoUrl = '/video/GDa8kZLNhJ4'; | |
export const demoChannelTitle = 'JavaScript Mastery'; | |
export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI'; | |
export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png' |
html, | |
body { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
a { | |
text-decoration: none; | |
color: black; | |
} | |
::-webkit-scrollbar { | |
width: 0px; | |
height: 5px; | |
} | |
::-webkit-scrollbar-thumb { | |
background-color: rgb(114, 113, 113); | |
border-radius: 10px; | |
height: 200px; | |
} | |
::-webkit-scrollbar-track { | |
background-color: transparent; | |
} | |
.category-btn:hover { | |
background-color: #FC1503 !important; | |
color: white !important; | |
} | |
.category-btn:hover span{ | |
color: white !important; | |
} | |
.react-player { | |
height: 77vh !important; | |
width: 100% !important; | |
} | |
.search-bar{ | |
border:none; | |
outline:none; | |
width:350px; | |
} | |
.category-btn{ | |
font-weight: bold !important; | |
text-transform: capitalize; | |
display: flex; | |
align-items: center; | |
justify-content: start; | |
cursor:pointer; | |
background: transparent; | |
outline: none; | |
border: none; | |
padding: 7px 15px; | |
margin: 10px 0px; | |
border-radius: 20px; | |
transition: all 0.3s ease; | |
} | |
@media screen and (max-width: 900px) { | |
.category-btn{ | |
margin: 10px; | |
} | |
} | |
@media screen and (max-width:800px){ | |
.copyright{ | |
display:none !important; | |
} | |
} | |
@media screen and (max-width: 600px) { | |
.scroll-horizontal { | |
overflow: auto !important; | |
} | |
.react-player { | |
height: 45vh !important; | |
} | |
.search-bar{ | |
width:200px; | |
} | |
} |
{ | |
"name": "project_youtube_video_player", | |
"version": "1.0.0", | |
"private": true, | |
"dependencies": { | |
"@emotion/react": "^11.10.0", | |
"@emotion/styled": "^11.10.0", | |
"@mui/icons-material": "^5.8.4", | |
"@mui/material": "^5.9.3", | |
"axios": "^0.27.2", | |
"react": "^18.2.0", | |
"react-dom": "^18.2.0", | |
"react-player": "^2.10.1", | |
"react-router-dom": "^6.3.0", | |
"react-scripts": "^5.0.1" | |
}, | |
"scripts": { | |
"start": "react-scripts start", | |
"build": "react-scripts build", | |
"test": "react-scripts test", | |
"eject": "react-scripts eject" | |
}, | |
"eslintConfig": { | |
"extends": [ | |
"react-app", | |
"react-app/jest" | |
] | |
}, | |
"browserslist": { | |
"production": [ | |
">0.2%", | |
"not dead", | |
"not op_mini all" | |
], | |
"development": [ | |
"last 1 chrome version", | |
"last 1 firefox version", | |
"last 1 safari version" | |
] | |
} | |
} |
You will check rapid api and Solve this problem.i am also fetching this error and I will resolve this error
been getting this error but stopped once I put the "X-RapidAPI-Key" as it is "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY, this one gave me 403 errors (not error but errors ) but using it as it is was better no errors
if you are quoting your API key as a string then remove that single or double commas in env file I hope it will resolve the problem and if they don't then copy the fetchfromAPI file from this project and paste it into yours
'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
I am using Vite and it says process unidentified
Same using vite also says to me Process is undefined .
'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
I am using Vite and it says process unidentified
Did you find any solution of this ?
i faced the same issue with the env file. Had to put the API key directly
check your version which your using in code are update or match according to youtube tutorial
And if i dont use env file and directly add the key, it works fine.
What could be the error ?
i face the same issue with enve file.
And if i dont use env file and directly add the key, it works fine.
What could be the error ?
import { Stack } from "@mui/material";
import { categories } from "../utils/constants";
const selectedCategory = "New";
const Sidebar = () => (
<Stack
direction="row"
sx={{
overflowY: 'auto',
height: { sx: 'auto', md: '95%'},
flexDirection: { md: 'column' },
}}
>
{categories.map((category) =>(
{category.icon}
{category.name}
))}
</Stack>
)
MY CODE
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import HomeIcon from '@mui/icons-material/Home';
import CodeIcon from '@mui/icons-material/Code';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import LiveTvIcon from '@mui/icons-material/LiveTv';
import SchoolIcon from '@mui/icons-material/School';
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import GraphicEqIcon from '@mui/icons-material/GraphicEq';
import TheaterComedyIcon from '@mui/icons-material/TheaterComedy';
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
export const logo = 'https://i.ibb.co/s9Qys2j/logo.png';
export const categories = [
{ name: 'New', icon: , },
{ name: 'JS Mastery', icon: , },
{ name: 'Coding', icon: , },
{ name: 'ReactJS', icon: , },
{ name: 'NextJS', icon: , },
{ name: 'Music', icon: },
{ name: 'Education', icon: , },
{ name: 'Podcast', icon: , },
{ name: 'Movie', icon: , },
{ name: 'Gaming', icon: , },
{ name: 'Live', icon: , },
{ name: 'Sport', icon: , },
{ name: 'Fashion', icon: , },
{ name: 'Beauty', icon: , },
{ name: 'Comedy', icon: , },
{ name: 'Gym', icon: , },
{ name: 'Crypto', icon: , },
];
export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png';
export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A';
export const demoVideoUrl = '/video/GDa8kZLNhJ4';
export const demoChannelTitle = 'JavaScript Mastery';
export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI';
export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png'
![Untitled](https://user-images.githubusercontent.com/83503804/237677622-5fca3353-3ec5-4f96-9990-3bf85f2d1504.png
instead of using saperate env file give the api key there itself it will work fine
I have fixed some errors when i changed the url link FROM THIS
url: 'https://youtube-v31.p.rapidapi.com/captions',
TO THINS ==========================
const BASE_URL = "https://youtube-v31.p.rapidapi.com";
this is in fetchFromAPI.jsx file
Thank you, I edited it successfully. I get an error because, in my URL, there is still a 'search'
how u solve this error can u tell me bro
Hello, I am finding an error css mistake and I just can not see what is the problem, the cards appear not align in my browser, well, in somme channels the cards are align an centered and in other channels it just doesn't, I have try to play around the css but then the channel card move around and is a litle bit messy, I try for very long and I wanted to ask some help.
Thanks!
If any one is facing issue just remove the key from .env file and leave it as it was in fetchFromApi.js file
same happens with me brother...if you find the solution please let me know.