mentor title smaller, disable after 10

mentorpal · Oct 8, 2024 · a20212c · a20212c
1 parent 65a78f0
commit a20212c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 26 deletions.
diff --git a/client/src/components/video-player.tsx b/client/src/components/video-player.tsx
@@ -89,7 +89,9 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
       getUtterance(state.mentorsById[state.curMentor], UtteranceName.INTRO)
   );
   const [introEnded, setIntroEnded] = useState<boolean>(false);
-  const { enabled: controlsEnabled, interacted } = controlsDisableHelper();
+  const [paused, setPaused] = useState<boolean>(true);
+  const { enabled: controlsEnabled, interacted } =
+    controlsDisableHelper(paused);
 
   useEffect(() => {
     if (isIntro && videoUrl) {
@@ -304,7 +306,10 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
   const mentorNameCard = (
     <div data-cy="mentor-name-card" className="mentor-name-card">
       <div
-        className="mentor-fav-icon-wrapper"
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
         data-cy="mentorname-faveicon-wrapper"
       >
         <p className="mentor-name-text" data-cy="mentor-name">
@@ -374,13 +379,22 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
         style={answerReactPlayerStyling}
         className="player-wrapper react-player-wrapper"
         data-cy="react-player-answer-video"
-        controls={controlsEnabled}
+        controls={controlsEnabled || paused}
         url={state.urlToPlay}
         pip={false}
+        onPause={() => {
+          interacted();
+          setPaused(true);
+        }}
         muted={false}
         onEnded={endVideo}
         ref={reactPlayerRef}
-        onPlay={onPlay}
+        onPlay={() => {
+          onPlay();
+          if (paused) {
+            setPaused(false);
+          }
+        }}
         onProgress={({ playedSeconds }) => {
           if (
             isIntro &&
@@ -439,6 +453,9 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
             track["mode"] = showCaptions ? "showing" : "hidden";
           }
         }}
+        onSeek={() => {
+          interacted();
+        }}
         loop={false}
         width="fit-content"
         height="fit-content"

diff --git a/client/src/hooks/controls-disable-helper.tsx b/client/src/hooks/controls-disable-helper.tsx
@@ -12,17 +12,18 @@ export interface ControlsDisableHelper {
   interacted: () => void;
 }
 
-export function controlsDisableHelper(): ControlsDisableHelper {
-  const [enabled, setEnabled] = useState(false);
+export function controlsDisableHelper(paused: boolean): ControlsDisableHelper {
+  const [enabled, setEnabled] = useState(true);
   const [lastInteractionTime, setLastInteractionTime] = useState(Date.now());
 
   useInterval(
     () => {
-      if (Date.now() - lastInteractionTime > 3000) {
+      if (Date.now() - lastInteractionTime > 10000) {
+        //10 seconds
         setEnabled(false);
       }
     },
-    enabled ? 1000 : null
+    enabled && !paused ? 1000 : null
   );
 
   function interacted() {

diff --git a/client/src/styles/video.css b/client/src/styles/video.css
@@ -50,6 +50,21 @@
   position: relative;
 }
 
+.email-mentor-button {
+  font-weight: bold;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.email-mentor-button:hover {
+  color: blue;
+  text-decoration: underline;
+}
+
 .mentor-name-card {
   background-color: #373737ad;
   position: absolute;
@@ -64,28 +79,17 @@
   border-radius: 0px 0px 10px 0px;
 }
 
-.mentor-fav-icon-wrapper {
-  display: flex;
-  align-items: center;
-}
-
 .mentor-name-text {
   padding: 0px 10px 0px 10px;
   height: 1rem;
   color: #ffffffd6;
 }
 
-.email-mentor-button {
-  font-weight: bold;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.email-mentor-button:hover {
-  color: blue;
-  text-decoration: underline;
+@media (max-width: 800px) {
+  .mentor-name-text {
+    font-size: 12px;
+    margin: 0;
+    margin-top: 7px;
+    margin-bottom: 7px;
+  }
 }