From 3735cdc4cd7dad875d592382804603191103d78e Mon Sep 17 00:00:00 2001 From: aaronshiel Date: Mon, 7 Oct 2024 22:55:37 -0700 Subject: [PATCH 1/4] disabled controls --- client/src/components/video-player.tsx | 14 ++++++- client/src/hooks/controls-disable-helper.tsx | 39 ++++++++++++++++++++ 2 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 client/src/hooks/controls-disable-helper.tsx diff --git a/client/src/components/video-player.tsx b/client/src/components/video-player.tsx index f6d1dbc1..e15cfad6 100644 --- a/client/src/components/video-player.tsx +++ b/client/src/components/video-player.tsx @@ -23,6 +23,7 @@ import { useWithVideoPlayerHeight } from "use-with-video-player-height"; import { useWithScreenOrientation } from "use-with-orientation"; import { useSelector } from "react-redux"; import { getUtterance } from "api"; +import { controlsDisableHelper } from "hooks/controls-disable-helper"; export interface VideoPlayerData { videoUrl: string; @@ -88,6 +89,7 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element { getUtterance(state.mentorsById[state.curMentor], UtteranceName.INTRO) ); const [introEnded, setIntroEnded] = useState(false); + const { enabled: controlsEnabled, interacted } = controlsDisableHelper(); useEffect(() => { if (isIntro && videoUrl) { @@ -356,14 +358,23 @@ export default function VideoPlayer(args: VideoPlayerParams): JSX.Element {
{ + interacted(); + }} + onClick={() => { + interacted(); + }} + onMouseMove={() => { + interacted(); + }} > - {/* TODO: shouldDisplayWebLinks && !isIdle */} {shouldDiplayWebLinks ? answerLinkCard : null} {mentorName ? mentorNameCard : null} void; +} + +export function controlsDisableHelper(): ControlsDisableHelper { + const [enabled, setEnabled] = useState(false); + const [lastInteractionTime, setLastInteractionTime] = useState(Date.now()); + + useInterval( + () => { + if (Date.now() - lastInteractionTime > 3000) { + setEnabled(false); + } + }, + enabled ? 1000 : null + ); + + function interacted() { + setLastInteractionTime(Date.now()); + if (!enabled) { + setEnabled(true); + } + } + + return { + enabled, + interacted, + }; +} From 65a78f0c223d33a0542cb25d8bd7093b7dcf25a6 Mon Sep 17 00:00:00 2001 From: aaronshiel Date: Mon, 7 Oct 2024 22:59:32 -0700 Subject: [PATCH 2/4] docker ocmpos --- .github/workflows/test-and-publish.yml | 4 ++-- Makefile | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/test-and-publish.yml b/.github/workflows/test-and-publish.yml index 0e46c829..fdc2efa8 100644 --- a/.github/workflows/test-and-publish.yml +++ b/.github/workflows/test-and-publish.yml @@ -31,8 +31,8 @@ jobs: - name: Authenticate with private NPM package run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc - uses: actions/checkout@v2 - - name: build + run app in docker-compose - run: docker-compose up -d + - name: build + run app in docker compose + run: docker compose up -d - name: check services running run: docker ps - name: cypress - run tests diff --git a/Makefile b/Makefile index 71a1d846..0a27fc4a 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,5 @@ DOCKER_IMAGE?=mentor-client -TEST_E2E_DOCKER_COMPOSE=docker-compose +TEST_E2E_DOCKER_COMPOSE=docker compose LICENSE_CONFIG?="license-config.json" node_modules/license-check-and-add: From a20212c9199abf16ac362d20b468812394bd0f5d Mon Sep 17 00:00:00 2001 From: aaronshiel Date: Mon, 7 Oct 2024 23:37:49 -0700 Subject: [PATCH 3/4] mentor title smaller, disable after 10 --- client/src/components/video-player.tsx | 25 ++++++++++-- client/src/hooks/controls-disable-helper.tsx | 9 +++-- client/src/styles/video.css | 40 +++++++++++--------- 3 files changed, 48 insertions(+), 26 deletions(-) diff --git a/client/src/components/video-player.tsx b/client/src/components/video-player.tsx index e15cfad6..8ced0ef0 100644 --- 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(false); - const { enabled: controlsEnabled, interacted } = controlsDisableHelper(); + const [paused, setPaused] = useState(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 = (

@@ -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 index 6c7faea5..ecb57bd4 100644 --- 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 index c62ab2dc..4af50af2 100644 --- 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; + } } From 2fe40991d1524c0e262d422ffe41c91b5f475ee8 Mon Sep 17 00:00:00 2001 From: aaronshiel Date: Tue, 8 Oct 2024 00:12:54 -0700 Subject: [PATCH 4/4] reduce close time --- client/src/hooks/controls-disable-helper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/hooks/controls-disable-helper.tsx b/client/src/hooks/controls-disable-helper.tsx index ecb57bd4..afbc9d55 100644 --- a/client/src/hooks/controls-disable-helper.tsx +++ b/client/src/hooks/controls-disable-helper.tsx @@ -18,7 +18,7 @@ export function controlsDisableHelper(paused: boolean): ControlsDisableHelper { useInterval( () => { - if (Date.now() - lastInteractionTime > 10000) { + if (Date.now() - lastInteractionTime > 3000) { //10 seconds setEnabled(false); }