I am a Solutions Architect who builds cool stuff with Javascript and Java.
jangbl / youtube-react Goto Github PK
View Code? Open in Web Editor NEWA Youtube clone built in React, Redux, Redux-saga
A Youtube clone built in React, Redux, Redux-saga
I am a Solutions Architect who builds cool stuff with Javascript and Java.
C:\Users\Desktop\tubeclone\youtube-react-master>npm install
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: please switch to a stable version
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which
failed Error: not found: python2
npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which
failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which
failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which
failed python2 Error: not found: python2
npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\VARISH\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb which
failed at F (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb which
failed at E (C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\which\which.js:89:16
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which
failed at C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which
failed code: 'ENOENT'
npm ERR! gyp verb which
failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which
succeeded python C:\Users\AppData\Local\Programs\Python\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\AppData\Local\Programs\Python\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AppData\Local\npm-cache_logs\2022-03-14T14_21_55_454Z-debug-0.log
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'C:\Users\Desktop\tubeclone\youtube-react-master\node_modules\react-scripts\bin\react-scripts.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
i use the youtube api as given in readme
Following the instructions in the readme as-is produced an error when trying to launch the app in any browser.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:125:11)
at Object.join (path.js:427:7)
at noopServiceWorkerMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
at launchEditorMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:317:13)
at C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\index.js:275:10)
at handleWebpackInternalMiddleware (C:\Users\Liam\Desktop\youtube-react-master\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (C:\Users\Liam\Desktop\youtube-react-master\node_modules\express\lib\router\layer.js:95:5)
Bumping react-scripts from 3.3.0 to 3.4.0 solved the problem, per https://stackoverflow.com/questions/58199001/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re
Hello i am relatively new to react. After viewing the code i struggle to understand how the videos property is filled in the video grid. Could you please point me to correct direction? How can i make the api call return certain videos only from certain channels. Also can i load private videos on my channel on youtube? Thanks in advance.
Hi, I'm a Redux maintainer.
I saw a link to your project today, and it looks pretty neat.
We have a new Redux Starter Kit package can simplify a lot of common Redux usage patterns, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state automatically without writing any action creators or action types by hand.
I'm hoping to add a "Usage Guide" docs page in the near future, and I've actually been looking for a moderately complex app that I can use as a basis for demonstrating the ways that Redux Starter Kit can simplify things. Youtube-React looks like the reducer logic and store setup fit that "medium complexity" level I'm looking for, although the use of sagas is not something I care about right now.
So, two thoughts:
If you've got any questions or anything I can help with, please ping me @acemarke on Twitter and Reactiflux, or tag me here on Github.
The home page works fine but the videos wont load and the animation goes on forever how to solve this
Thank you
Here is my repo: https://github.com/ernestdolog/i-tube
It is alll fine except that HeaderNav.scss doesn't get loaded into HeaderNav.js. It doesn't throw any errors, just simply doesn't get loaded in the page.
What I tried until now: delete package-lock, node_modules, rebuild in any possible permutations.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.