fixed a few miscellaneous bugs

Manh-Phuong · Jun 11, 2023 · a0e2fc4 · a0e2fc4
1 parent 442be0a
commit a0e2fc4
Show file tree

Hide file tree

Showing 8 changed files with 18,123 additions and 18,058 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,58 +1,61 @@
 {
-  "homepage": "https://manh-phuong.github.io/clone_tiktok",
-  "name": "clone_tiktok",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@tippyjs/react": "^4.2.6",
-    "axios": "^1.4.0",
-    "classnames": "^2.3.2",
-    "customize-cra": "^1.0.0",
-    "normalize.css": "^8.0.1",
-    "react": "^18.2.0",
-    "react-app-rewired": "^2.2.1",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.2",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-app-rewired start",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired 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"
-    ]
-  },
-  "devDependencies": {
-    "babel-plugin-module-resolver": "^5.0.0",
-    "gh-pages": "^5.0.0",
-    "sass": "^1.62.1"
-  }
+    "homepage": "https://manh-phuong.github.io/clone_tiktok",
+    "name": "clone_tiktok",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.3.0",
+        "@fortawesome/free-brands-svg-icons": "^6.0.0",
+        "@fortawesome/free-regular-svg-icons": "^6.0.0",
+        "@fortawesome/free-solid-svg-icons": "^6.0.0",
+        "@fortawesome/react-fontawesome": "^0.1.17",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@tippyjs/react": "^4.2.6",
+        "axios": "^1.4.0",
+        "classnames": "^2.3.2",
+        "customize-cra": "^1.0.0",
+        "gapi-script": "^1.2.0",
+        "normalize.css": "^8.0.1",
+        "react": "^18.2.0",
+        "react-app-rewired": "^2.2.1",
+        "react-dom": "^18.2.0",
+        "react-google-login": "^5.2.2",
+        "react-router-dom": "^6.11.2",
+        "react-scripts": "5.0.1",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-app-rewired start",
+        "predeploy": "npm run build",
+        "deploy": "gh-pages -d build",
+        "clean": "gh-pages-clean",
+        "build": "react-app-rewired build",
+        "test": "react-app-rewired test",
+        "eject": "react-app-rewired 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"
+        ]
+    },
+    "devDependencies": {
+        "babel-plugin-module-resolver": "^5.0.0",
+        "gh-pages": "^5.0.0",
+        "sass": "^1.62.1"
+    }
 }
diff --git a/src/components/GlobalStyles/GlobalStyles.scss b/src/components/GlobalStyles/GlobalStyles.scss
@@ -25,6 +25,11 @@
     --default-layout-width: 1150px;
 }
 
+
+// [data-theme="dark"] {
+//     --primary: white;
+//   }
+
 html {
     font-size: 62.5%;
 }

diff --git a/src/components/Popper/Menu/index.js b/src/components/Popper/Menu/index.js
@@ -7,6 +7,7 @@ import HeaderMenu from './HeaderMenu';
 import { useState } from 'react';
 
 const cx = classNames.bind(styles);
+// const cx2 = classNames.bind(styles2);
 
 const defaultFn = () => {};
 
@@ -27,15 +28,15 @@ function Menu({ items = [], children, hideOnClick = false, onChange = defaultFn
                             setState((prev) => [...prev, item.children]);
                         } else if (item.DarkMode && item.title === 'Dark mode') {
                             item.iconRight = (
-                                <div width="44px" height="24px" className={cx('mode', 'isDarkMode')}>
+                                <div width="44px" height="24px" className={`${cx('mode', 'isDarkMode')} ${'dark'}`}  data-theme="dark">
                                     <span width="20px" height="20px" className={cx('mode-btn-dark')}></span>
                                 </div>
                             );
                             setState((prev) => [...prev]);
                             item.DarkMode = !item.DarkMode;
                         } else if (!item.DarkMode && item.title === 'Dark mode') {
                             item.iconRight = (
-                                <div width="44px" height="24px" className={cx('mode')}>
+                                <div width="44px" height="24px" className={cx('mode')} data-theme="light">
                                     <span width="20px" height="20px" className={cx('mode-btn-light')}></span>
                                 </div>
                             );

diff --git a/src/config/routes.js b/src/config/routes.js
@@ -1,5 +1,5 @@
 const routes = {
-    home: '/',
+    home: '/clone_tiktok',
     following: '/following',
     profile: '/:nickname',
     upload: '/upload',

diff --git a/src/layouts/components/MainContent/HomeContent/HomeContentItem.js b/src/layouts/components/MainContent/HomeContent/HomeContentItem.js
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames/bind';
 import styles from './HomeContent.module.scss';
 import PropTypes from 'prop-types';
@@ -25,7 +26,6 @@ import {
     RedditIcon,
     TelegramIcon,
 } from '~/components/Icons';
-import { useState } from 'react';
 
 const cx = classNames.bind(styles);
 
@@ -68,6 +68,35 @@ function HomeContentItem({ data }) {
         setShowShare(false);
     };
 
+    // const videoRef = useRef(null);
+    // const [playVideo, setPlayVideo] = useState(false);
+
+    // useEffect(() => {
+    //     const options = {
+    //         root: null,
+    //         rootMargin: '0px',
+    //         threshold: 0.5, // Tỷ lệ màn hình hiển thị video, 0.5 = 50%
+    //     };
+
+    //     const observer = new IntersectionObserver((entries) => {
+    //         entries.forEach((entry) => {
+    //             if (entry.isIntersecting && playVideo) {
+    //                 // Nếu video hiển thị trên màn hình, bật phát tự động
+    //                 videoRef.current.play();
+    //             } else {
+    //                 // Nếu video không hiển thị trên màn hình, tạm dừng phát
+    //                 videoRef.current.pause();
+    //             }
+    //         });
+    //     }, options);
+
+    //     observer.observe(videoRef.current);
+
+    //     return () => {
+    //         observer.unobserve(videoRef.current);
+    //     };
+    // }, []);
+
     return (
         <div className={cx('wrapper')}>
             <div>
@@ -120,7 +149,8 @@ function HomeContentItem({ data }) {
                             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                             allowfullscreen
                         ></iframe> */}
-                        <video className={cx('video-post-source')} loop="" controls>
+                        {/* <video ref={videoRef} className={cx('video-post-source')} loop controls> */}
+                        <video className={cx('video-post-source')} loop controls>
                             {/* <source src="https://files.fullstack.edu.vn/f8-tiktok/videos/1912-6413eb55ed5ec.mp4" /> */}
                             <source src={file_url} />
                         </video>
@@ -146,7 +176,7 @@ function HomeContentItem({ data }) {
                             <span className={cx('mark-count', 'count')}>{shares_count}</span>
                         </div>
 
-                        <Tippy                         
+                        <Tippy
                             offset={[-10, 6]}
                             interactive
                             delay={[0, 700]}

diff --git a/src/layouts/components/Sidebar/Sidebar.module.scss b/src/layouts/components/Sidebar/Sidebar.module.scss
@@ -4,9 +4,13 @@
     margin-top: 60px;
     padding: 21px 0 26px 0px;
     position: fixed;
-    overflow-y: scroll;
+    overflow-y: hidden;
     top: 0;
     bottom: 0;
+    transition: overflow-y 0.3s ease; 
+    &:hover {
+        overflow-y: auto;
+    }
 }
 
 .border-top {

diff --git a/src/utils/httpRequest.js b/src/utils/httpRequest.js
@@ -2,7 +2,8 @@ import axios from 'axios';
 
 console.log(process.env.REACT_APP_BASE_URL);
 const request = axios.create({
-    baseURL: process.env.REACT_APP_BASE_URL,
+    // baseURL: process.env.REACT_APP_BASE_URL,
+    baseURL: "https://tiktok.fullstack.edu.vn/api/"
 });
 
 export const get = async (path, options = {}) => {