From f0a71601ba4b85e2353a484ab18f7223002445b0 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 14:10:02 -0800 Subject: [PATCH 01/18] added screen lock useEffect to App component, need to push as draft for netlify link to test on mobile --- src/App.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/App.js b/src/App.js index 8e7911c..33716bc 100644 --- a/src/App.js +++ b/src/App.js @@ -62,6 +62,15 @@ const App = () => { } }, []); + useEffect(() => { + if ("orientation" in screen) { + document.documentElement.requestFullScreen(); + screen.orientation.lock("portrait-primary").then(null, function(error) { + document.exitFullscreen(); + }); + } + }, []); + const toggleShutterPress = () => { return setShutterPress(!shutterPress); }; From 345bd55b476e1e9e00e0465cc1bc9dbc54651339 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 14:17:12 -0800 Subject: [PATCH 02/18] changed placeholder img on cluster page from svg to png for netlify deployment --- src/organisms/ClusterPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/organisms/ClusterPage.jsx b/src/organisms/ClusterPage.jsx index 408791b..adf33d2 100644 --- a/src/organisms/ClusterPage.jsx +++ b/src/organisms/ClusterPage.jsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { useHistory } from "react-router-dom"; import GridCard from "../molecules/GridCard"; -import placeholderImg from "../images/category_placeholder.svg"; +import placeholderImg from "../images/category_placeholder.png"; const Root = styled.div``; From 7aadc10432c0d35c5c8268de85ca86606673b53c Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 14:34:44 -0800 Subject: [PATCH 03/18] requestFullscreen not requestFullScreen --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 33716bc..f4ea80a 100644 --- a/src/App.js +++ b/src/App.js @@ -64,7 +64,7 @@ const App = () => { useEffect(() => { if ("orientation" in screen) { - document.documentElement.requestFullScreen(); + document.documentElement.requestFullscreen(); screen.orientation.lock("portrait-primary").then(null, function(error) { document.exitFullscreen(); }); From cd6ce75a023bb1afc4698a56327e656510a63150 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 14:46:07 -0800 Subject: [PATCH 04/18] attempt to use Ref --- src/App.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index f4ea80a..90dab92 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import "./App.css"; import HomePage from "./organisms/HomePage"; import CategoryPage from "./organisms/CategoryPage"; @@ -48,6 +48,7 @@ const App = () => { const [shutterPress, setShutterPress] = useState(false); const [searchFocus, setSearchFocus] = useState(false); const [appCluster, setAppCluster] = useState(); + const appContainer = useRef(); useEffect(() => { const permissions = JSON.parse(localStorage.getItem("permissions")); @@ -64,7 +65,7 @@ const App = () => { useEffect(() => { if ("orientation" in screen) { - document.documentElement.requestFullscreen(); + appContainer.current.requestFullscreen(); screen.orientation.lock("portrait-primary").then(null, function(error) { document.exitFullscreen(); }); @@ -81,7 +82,7 @@ const App = () => { return ( -
+
From ecd667e1a9d14ab181915aca3e0812b3fb9d16b0 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 15:16:44 -0800 Subject: [PATCH 05/18] removed document methods, only using screen --- src/App.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 90dab92..9ccb375 100644 --- a/src/App.js +++ b/src/App.js @@ -48,7 +48,6 @@ const App = () => { const [shutterPress, setShutterPress] = useState(false); const [searchFocus, setSearchFocus] = useState(false); const [appCluster, setAppCluster] = useState(); - const appContainer = useRef(); useEffect(() => { const permissions = JSON.parse(localStorage.getItem("permissions")); @@ -65,9 +64,11 @@ const App = () => { useEffect(() => { if ("orientation" in screen) { - appContainer.current.requestFullscreen(); + const element = document.documentElement; + console.log("test"); + // element.requestFullscreen(); screen.orientation.lock("portrait-primary").then(null, function(error) { - document.exitFullscreen(); + // document.exitFullscreen(); }); } }, []); @@ -82,7 +83,7 @@ const App = () => { return ( -
+
From 8cca8ec52313d686df09d29b77ac8a33764d51d8 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 16:45:15 -0800 Subject: [PATCH 06/18] changed max-width of 575 to 700, and 573 to 697, etc on BottomNav, CameraNav and App --- src/App.css | 12 ++++++------ src/App.js | 20 ++++++++++---------- src/molecules/BottomNav.jsx | 4 ++-- src/molecules/CameraNav.jsx | 4 ++-- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/App.css b/src/App.css index 5df8839..5118ba4 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ -.App { - margin: 0 auto; - max-width: 575px; - width: 100%; - /* ^^ Temporary constraint so it's mobile view all the time, will remove for tablet/desktop view once we get it */ -} +.App { + margin: 0 auto; + max-width: 700px; + width: 100%; + /* ^^ Temporary constraint so it's mobile view all the time, will remove for tablet/desktop view once we get it */ +} diff --git a/src/App.js b/src/App.js index 9ccb375..b3a6b7b 100644 --- a/src/App.js +++ b/src/App.js @@ -62,16 +62,16 @@ const App = () => { } }, []); - useEffect(() => { - if ("orientation" in screen) { - const element = document.documentElement; - console.log("test"); - // element.requestFullscreen(); - screen.orientation.lock("portrait-primary").then(null, function(error) { - // document.exitFullscreen(); - }); - } - }, []); + // useEffect(() => { + // if ("orientation" in screen) { + // const element = document.documentElement; + // console.log("test"); + // // element.requestFullscreen(); + // screen.orientation.lock("portrait-primary").then(null, function(error) { + // // document.exitFullscreen(); + // }); + // } + // }, []); const toggleShutterPress = () => { return setShutterPress(!shutterPress); diff --git a/src/molecules/BottomNav.jsx b/src/molecules/BottomNav.jsx index 2bb685a..faf96eb 100644 --- a/src/molecules/BottomNav.jsx +++ b/src/molecules/BottomNav.jsx @@ -7,7 +7,7 @@ import { Link, useLocation, useHistory } from "react-router-dom"; import cameraImg from "../images/camera_center_icon.svg"; const Container = styled.div` - max-width: 573px; + max-width: 697px; width: 100vw; height: 56px; @@ -105,7 +105,7 @@ const InnerContainer = styled.div` justify-content: space-between; width: 100%; position: relative; - max-width: 575px; + max-width: 700px; `; const CameraButton = styled.button` diff --git a/src/molecules/CameraNav.jsx b/src/molecules/CameraNav.jsx index 495ef72..36c1f11 100644 --- a/src/molecules/CameraNav.jsx +++ b/src/molecules/CameraNav.jsx @@ -10,7 +10,7 @@ import cameraBtnImgDarkMode from "../images/camera_icon_camera.svg"; import cameraBtnImgLightMode from "../images/camera_icon_camera_light.svg"; const Container = styled.div` - max-width: 575px; + max-width: 700px; width: 100vw; height: 56px; @@ -41,7 +41,7 @@ const InnerContainer = styled.div` justify-content: space-between; width: 100%; position: relative; - max-width: 573px; + max-width: 693px; `; const CameraImage = styled.img` From ea17291ab20638cf59568d5734330de5b01645d0 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 21:43:57 -0800 Subject: [PATCH 07/18] trying different api --- src/App.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index b3a6b7b..2ca5263 100644 --- a/src/App.js +++ b/src/App.js @@ -62,16 +62,16 @@ const App = () => { } }, []); - // useEffect(() => { - // if ("orientation" in screen) { - // const element = document.documentElement; - // console.log("test"); - // // element.requestFullscreen(); - // screen.orientation.lock("portrait-primary").then(null, function(error) { - // // document.exitFullscreen(); - // }); - // } - // }, []); + useEffect(() => { + if ("orientation" in screen) { + const element = document.documentElement; + console.log("test"); + // element.requestFullscreen(); + ScreenOrientation.lock("portrait-primary").then(null, function(error) { + // document.exitFullscreen(); + }); + } + }, []); const toggleShutterPress = () => { return setShutterPress(!shutterPress); From fcc51bb0e5907e73958f5df169a576a8f4877657 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 22:02:25 -0800 Subject: [PATCH 08/18] checking window. screen on mobile device --- src/App.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 2ca5263..4b96c61 100644 --- a/src/App.js +++ b/src/App.js @@ -63,14 +63,14 @@ const App = () => { }, []); useEffect(() => { - if ("orientation" in screen) { - const element = document.documentElement; - console.log("test"); - // element.requestFullscreen(); - ScreenOrientation.lock("portrait-primary").then(null, function(error) { - // document.exitFullscreen(); - }); - } + // if ("orientation" in screen) { + // const element = document.documentElement; + // console.log("test"); + // // element.requestFullscreen(); + window.screen.orientation.lock("portrait-primary"); //.then(null, function(error) { + // document.exitFullscreen(); + // }); + // } }, []); const toggleShutterPress = () => { From acf2d324ca756f46ba3b3389b1aaeccd8553b8af Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 22:17:54 -0800 Subject: [PATCH 09/18] window.screen.orientation.type --- src/App.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 4b96c61..3916a5a 100644 --- a/src/App.js +++ b/src/App.js @@ -65,12 +65,13 @@ const App = () => { useEffect(() => { // if ("orientation" in screen) { // const element = document.documentElement; - // console.log("test"); + console.log(window.screen.orientation.type); // // element.requestFullscreen(); window.screen.orientation.lock("portrait-primary"); //.then(null, function(error) { // document.exitFullscreen(); // }); // } + console.log(window.screen.orientation.type); }, []); const toggleShutterPress = () => { From 5c1f35abda0532de888f91cb40604d24fcff7b2a Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Tue, 25 Feb 2020 22:33:48 -0800 Subject: [PATCH 10/18] locked screen on tutorial 'next' click --- src/App.js | 23 ++++++++++++----------- src/organisms/TutorialPage.jsx | 24 ++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 3916a5a..2380074 100644 --- a/src/App.js +++ b/src/App.js @@ -62,17 +62,18 @@ const App = () => { } }, []); - useEffect(() => { - // if ("orientation" in screen) { - // const element = document.documentElement; - console.log(window.screen.orientation.type); - // // element.requestFullscreen(); - window.screen.orientation.lock("portrait-primary"); //.then(null, function(error) { - // document.exitFullscreen(); - // }); - // } - console.log(window.screen.orientation.type); - }, []); + // useEffect(() => { + // // if ("orientation" in screen) { + // // const element = document.documentElement; + // document.getElementsById("button") + // console.log(window.screen.orientation.type); + // // // element.requestFullscreen(); + // window.screen.orientation.lock("natural"); //.then(null, function(error) { + // // document.exitFullscreen(); + // // }); + // // } + // console.log(window.screen.orientation.type); + // }, []); const toggleShutterPress = () => { return setShutterPress(!shutterPress); diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index b3ec63a..21ff057 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { withTheme } from "styled-components"; import Stepper from "../molecules/Stepper"; import styled from "styled-components"; @@ -145,6 +145,26 @@ export const TutorialPage = ({ theme }) => { const [step, setStep] = useState(1); const history = useHistory(); + useEffect(() => { + // if ("orientation" in screen) { + // const element = document.documentElement; + document.getElementById("button").addEventListener( + "click", + function() { + document.documentElement.requestFullscreen(); + screen.orientation.lock("natural"); + }, + false + ); + console.log(window.screen.orientation.type); + // // element.requestFullscreen(); + // window.screen.orientation.lock("natural"); //.then(null, function(error) { + // document.exitFullscreen(); + // }); + // } + console.log(window.screen.orientation.type); + }, []); + const handleNext = () => { switch (step) { case 3: { @@ -177,7 +197,7 @@ export const TutorialPage = ({ theme }) => { {renderPage(step, theme)} - From b74d8ef4fb097b7d829fa1ce5c80233a7703eec6 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 09:29:32 -0800 Subject: [PATCH 11/18] added screen lock to App file but commented out so that tutorial page doesn't jump during locking phase, attached screen lock to home page because this is the first plact that we need it --- src/App.js | 25 ++++++++++++------------- src/organisms/HomePage.jsx | 14 +++++++++++++- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index 2380074..890515f 100644 --- a/src/App.js +++ b/src/App.js @@ -62,18 +62,17 @@ const App = () => { } }, []); - // useEffect(() => { - // // if ("orientation" in screen) { - // // const element = document.documentElement; - // document.getElementsById("button") - // console.log(window.screen.orientation.type); - // // // element.requestFullscreen(); - // window.screen.orientation.lock("natural"); //.then(null, function(error) { - // // document.exitFullscreen(); - // // }); - // // } - // console.log(window.screen.orientation.type); - // }, []); + useEffect(() => { + document.getElementById("appContainer").addEventListener( + "click", + function() { + document.documentElement.requestFullscreen(); + screen.orientation.lock("natural"); + }, + false + ); + console.log(window.screen.orientation.type); + }, []); const toggleShutterPress = () => { return setShutterPress(!shutterPress); @@ -85,7 +84,7 @@ const App = () => { return ( -
+
diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index 2c8324c..5f429a1 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -16,8 +16,20 @@ const TopContainer = styled.div` `; const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => { + useEffect(() => { + document.getElementById("homeContainer").addEventListener( + "click", + function() { + document.documentElement.requestFullscreen(); + screen.orientation.lock("natural"); + }, + false + ); + console.log(window.screen.orientation.type); + }, []); + return ( - toggleSearchFocus(false)}> + toggleSearchFocus(false)}> Date: Wed, 26 Feb 2020 09:33:32 -0800 Subject: [PATCH 12/18] the useEffect on App wasn't commented out --- src/App.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 890515f..a0fb5df 100644 --- a/src/App.js +++ b/src/App.js @@ -62,17 +62,17 @@ const App = () => { } }, []); - useEffect(() => { - document.getElementById("appContainer").addEventListener( - "click", - function() { - document.documentElement.requestFullscreen(); - screen.orientation.lock("natural"); - }, - false - ); - console.log(window.screen.orientation.type); - }, []); + // useEffect(() => { + // document.getElementById("appContainer").addEventListener( + // "click", + // function() { + // document.documentElement.requestFullscreen(); + // screen.orientation.lock("natural"); + // }, + // false + // ); + // console.log(window.screen.orientation.type); + // }, []); const toggleShutterPress = () => { return setShutterPress(!shutterPress); From 5a11a85fbf29832dd6fb13058f3d687ed7a7f5b9 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 09:42:34 -0800 Subject: [PATCH 13/18] useEffect was not defined on home page --- src/organisms/HomePage.jsx | 2 +- src/organisms/TutorialPage.jsx | 32 +++++++++++++------------------- 2 files changed, 14 insertions(+), 20 deletions(-) diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index 5f429a1..05358c1 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import HomeSearchBar from "../molecules/HomeSearchBar"; import CategoryGrid from "../molecules/CategoryGrid"; import styled from "styled-components"; diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index 21ff057..b741ceb 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -145,25 +145,19 @@ export const TutorialPage = ({ theme }) => { const [step, setStep] = useState(1); const history = useHistory(); - useEffect(() => { - // if ("orientation" in screen) { - // const element = document.documentElement; - document.getElementById("button").addEventListener( - "click", - function() { - document.documentElement.requestFullscreen(); - screen.orientation.lock("natural"); - }, - false - ); - console.log(window.screen.orientation.type); - // // element.requestFullscreen(); - // window.screen.orientation.lock("natural"); //.then(null, function(error) { - // document.exitFullscreen(); - // }); - // } - console.log(window.screen.orientation.type); - }, []); + // useEffect(() => { + + // document.getElementById("button").addEventListener( + // "click", + // function() { + // document.documentElement.requestFullscreen(); + // screen.orientation.lock("natural"); + // }, + // false + // ); + // console.log(window.screen.orientation.type); + + // }, []); const handleNext = () => { switch (step) { From e45af62843f365e7a03cd49deb3b76eabccdf079 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 10:13:26 -0800 Subject: [PATCH 14/18] trying load event --- src/organisms/HomePage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index 05358c1..dbcbe50 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -18,7 +18,7 @@ const TopContainer = styled.div` const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => { useEffect(() => { document.getElementById("homeContainer").addEventListener( - "click", + "load", function() { document.documentElement.requestFullscreen(); screen.orientation.lock("natural"); From dc0279623ca41aa810e0d707bc92a9d20a49520c Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 10:21:16 -0800 Subject: [PATCH 15/18] change to fullscreen and lock on last tutorial next button or any click on the category page --- src/organisms/HomePage.jsx | 2 +- src/organisms/TutorialPage.jsx | 26 +++++++++++++------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index dbcbe50..05358c1 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -18,7 +18,7 @@ const TopContainer = styled.div` const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => { useEffect(() => { document.getElementById("homeContainer").addEventListener( - "load", + "click", function() { document.documentElement.requestFullscreen(); screen.orientation.lock("natural"); diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index b741ceb..fc49aa6 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -145,19 +145,19 @@ export const TutorialPage = ({ theme }) => { const [step, setStep] = useState(1); const history = useHistory(); - // useEffect(() => { - - // document.getElementById("button").addEventListener( - // "click", - // function() { - // document.documentElement.requestFullscreen(); - // screen.orientation.lock("natural"); - // }, - // false - // ); - // console.log(window.screen.orientation.type); - - // }, []); + useEffect(() => { + if (step === 3) { + document.getElementById("button").addEventListener( + "click", + function() { + document.documentElement.requestFullscreen(); + screen.orientation.lock("natural"); + }, + false + ); + console.log(window.screen.orientation.type); + } + }, [step]); const handleNext = () => { switch (step) { From 036ceb622a02036ae403c2075d6b7d0dbd322ee5 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 10:23:56 -0800 Subject: [PATCH 16/18] trying without fullscreen request --- src/organisms/HomePage.jsx | 2 +- src/organisms/TutorialPage.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index 05358c1..3fa088d 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -20,7 +20,7 @@ const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => { document.getElementById("homeContainer").addEventListener( "click", function() { - document.documentElement.requestFullscreen(); + // document.documentElement.requestFullscreen(); screen.orientation.lock("natural"); }, false diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index fc49aa6..192602b 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -150,7 +150,7 @@ export const TutorialPage = ({ theme }) => { document.getElementById("button").addEventListener( "click", function() { - document.documentElement.requestFullscreen(); + // document.documentElement.requestFullscreen(); screen.orientation.lock("natural"); }, false From 661d0e233017aa2646d1354baf0277a36563c3bf Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 10:36:17 -0800 Subject: [PATCH 17/18] requires fullscreen request, commented out screen lock and fullscreen on last next button of tutorial because it was making a race condition and sometimes reloading the tutorial (the sideeffect and push were competing) --- src/organisms/HomePage.jsx | 3 +-- src/organisms/TutorialPage.jsx | 25 ++++++++++++------------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/organisms/HomePage.jsx b/src/organisms/HomePage.jsx index 3fa088d..6f9a8a4 100644 --- a/src/organisms/HomePage.jsx +++ b/src/organisms/HomePage.jsx @@ -20,12 +20,11 @@ const HomePage = ({ theme, toggleTheme, searchFocus, toggleSearchFocus }) => { document.getElementById("homeContainer").addEventListener( "click", function() { - // document.documentElement.requestFullscreen(); + document.documentElement.requestFullscreen(); screen.orientation.lock("natural"); }, false ); - console.log(window.screen.orientation.type); }, []); return ( diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index 192602b..e6475d2 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -145,19 +145,18 @@ export const TutorialPage = ({ theme }) => { const [step, setStep] = useState(1); const history = useHistory(); - useEffect(() => { - if (step === 3) { - document.getElementById("button").addEventListener( - "click", - function() { - // document.documentElement.requestFullscreen(); - screen.orientation.lock("natural"); - }, - false - ); - console.log(window.screen.orientation.type); - } - }, [step]); + // useEffect(() => { + // if (step === 3) { + // document.getElementById("button").addEventListener( + // "click", + // function() { + // document.documentElement.requestFullscreen(); + // screen.orientation.lock("natural"); + // }, + // false + // ); + // } + // }, [step]); const handleNext = () => { switch (step) { From c450461e305d212a9a117ea5f6a60c9e867e6e98 Mon Sep 17 00:00:00 2001 From: CJ Lucido Date: Wed, 26 Feb 2020 10:41:23 -0800 Subject: [PATCH 18/18] it wasn't causing a race condition, something else is restarting the tutorial on homepage load --- src/organisms/TutorialPage.jsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/organisms/TutorialPage.jsx b/src/organisms/TutorialPage.jsx index e6475d2..092245a 100644 --- a/src/organisms/TutorialPage.jsx +++ b/src/organisms/TutorialPage.jsx @@ -145,18 +145,18 @@ export const TutorialPage = ({ theme }) => { const [step, setStep] = useState(1); const history = useHistory(); - // useEffect(() => { - // if (step === 3) { - // document.getElementById("button").addEventListener( - // "click", - // function() { - // document.documentElement.requestFullscreen(); - // screen.orientation.lock("natural"); - // }, - // false - // ); - // } - // }, [step]); + useEffect(() => { + if (step === 3) { + document.getElementById("button").addEventListener( + "click", + function() { + document.documentElement.requestFullscreen(); + screen.orientation.lock("natural"); + }, + false + ); + } + }, [step]); const handleNext = () => { switch (step) {