From 82b92d0f7e68a571053d7a671adcf4a80d03e6aa Mon Sep 17 00:00:00 2001 From: tony Date: Tue, 18 Apr 2023 12:01:04 -0700 Subject: [PATCH] Fixed error with Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'pause') Source Components/Layout/section.jsx (22:27) @ pause Added additional pages. Created unique id for video components. --- Components/Layout/section.jsx | 19 ++++++++++++------- pages/about.js | 18 ++++++++++++++++++ pages/contactus.js | 18 ++++++++++++++++++ pages/getinvolved.js | 18 ++++++++++++++++++ pages/hireus.js | 18 ++++++++++++++++++ pages/index.js | 18 ++++++++++++------ pages/projects.js | 18 ++++++++++++++++++ 7 files changed, 114 insertions(+), 13 deletions(-) create mode 100644 pages/about.js create mode 100644 pages/contactus.js create mode 100644 pages/getinvolved.js create mode 100644 pages/hireus.js create mode 100644 pages/projects.js diff --git a/Components/Layout/section.jsx b/Components/Layout/section.jsx index b581e75..cfdbc1d 100644 --- a/Components/Layout/section.jsx +++ b/Components/Layout/section.jsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from "react"; import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx"; + const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => { const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); @@ -10,23 +11,27 @@ const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => { rootMargin: "0px", threshold: 0.5, }; - + const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setIsPlaying(true); - videoRef.current.play(); + videoRef.current?.play(); } else { setIsPlaying(false); - videoRef.current.pause(); + videoRef.current?.pause(); } }); }, options); - - observer.observe(videoRef.current); - + + if (videoRef.current) { + observer.observe(videoRef.current); + } + return () => { - observer.unobserve(videoRef.current); + if (videoRef.current) { + observer.unobserve(videoRef.current); + } }; }, []); diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 0000000..00d0c3c --- /dev/null +++ b/pages/about.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/contactus.js b/pages/contactus.js new file mode 100644 index 0000000..5ae612e --- /dev/null +++ b/pages/contactus.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/getinvolved.js b/pages/getinvolved.js new file mode 100644 index 0000000..b4cbb61 --- /dev/null +++ b/pages/getinvolved.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/hireus.js b/pages/hireus.js new file mode 100644 index 0000000..a782823 --- /dev/null +++ b/pages/hireus.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/index.js b/pages/index.js index 6adb367..5c0a7ca 100644 --- a/pages/index.js +++ b/pages/index.js @@ -8,37 +8,43 @@ export default function Home() { <>
+ +
+ + ); +}