diff --git a/package-lock.json b/package-lock.json index 3759ad0..f1fdf84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4598,6 +4598,11 @@ "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" }, + "deepmerge": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz", + "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==" + }, "default-gateway": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz", @@ -8091,6 +8096,11 @@ "strip-bom": "^3.0.0" } }, + "load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=" + }, "loader-fs-cache": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz", @@ -8334,6 +8344,11 @@ "p-is-promise": "^2.0.0" } }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -10979,11 +10994,28 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-player": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.5.0.tgz", + "integrity": "sha512-wwTp6KO6uF/QRvwV2rh+jb6A7rfZLgdVPKTgidXYYvb2IkjYd3Db9BtSVGqQeLw1e9y3OSucBCrLlJtovSMuzg==", + "requires": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/package.json b/package.json index bfe9e03..60dbead 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "dotenv": "^8.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-player": "^2.5.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1" }, diff --git a/src/api/service.js b/src/api/service.js index 44192ce..2aaa016 100644 --- a/src/api/service.js +++ b/src/api/service.js @@ -5,7 +5,7 @@ const enviromentVariable = path.resolve(__dirname, '..', '..', '.env'); require('dotenv').config({ path: enviromentVariable }); const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3'; -const YOUTUBE_AUTH_KEY = 'AIzaSyDBuOTCfHPhoq3NvmssqQfP5EdxaSf4bOU'; +const YOUTUBE_AUTH_KEY = 'AIzaSyDztQJzpfZ5gg53oXV3MDD1zsJlI39LOpI'; export const searchVideos = async (searchText) => { const URL = `${YOUTUBE_API_URL}/search?part=snippet&q=${searchText}&maxResults=25&key=${YOUTUBE_AUTH_KEY}`; diff --git a/src/components/content/VideoPage/VideoPage.js b/src/components/content/VideoPage/VideoPage.js index f2ba84a..fd2ae86 100644 --- a/src/components/content/VideoPage/VideoPage.js +++ b/src/components/content/VideoPage/VideoPage.js @@ -26,12 +26,14 @@ class VideoPage extends Component { } componentDidMount() { - this.updateVideoId(); + const { match: { params: { videoId } } } = this.props; + this.getInfoComments(videoId); } componentDidUpdate(prevProps, prevState) { const { videoId } = this.state; this.cancelRedirect(); + console.log(videoId, prevState.videoId) if (prevState.videoId !== videoId) { this.updateVideoId(); } @@ -53,19 +55,12 @@ class VideoPage extends Component { } updateVideoId() { - const { - match: { - params: { videoId }, - }, - } = this.props; + const { videoId } = this.state; this.getInfoComments(videoId); } handleSelectedVideo(videoIdParam) { - const { videoId } = this.state; - this.setState({ videoId: videoIdParam }); - this.getInfoComments(videoId); - this.setState({ redirect: true, selected: videoIdParam }); + this.setState({ redirect: true, selected: videoIdParam, videoId: videoIdParam }); } generateSideBar() { @@ -82,6 +77,7 @@ class VideoPage extends Component { } render() { + console.log(this.state) const { videoInfo, videoComments, redirect, selected, relatedVideos, videoId } = this.state; if (!videoInfo || !videoComments) return ; if (redirect) { diff --git a/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js b/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js index 5f7b649..5a793b9 100644 --- a/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js +++ b/src/components/content/VideoPage/VideoPlayer/VideoPlayer.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; - +import ReactPlayer from 'react-player'; +import { addItem } from '../../../../service/localStorage'; import '../../../../css/chanelInfo.css'; class VideoPlayer extends Component { @@ -8,11 +9,10 @@ class VideoPlayer extends Component { const playerURL = `https://www.youtube.com/embed/${embedId}`; return (