Merge pull request #148 from medyo/develop

implement: dnd mode
medyo · Mar 29, 2023 · 57a20b2 · 57a20b2
2 parents 8335442 + 9ea2147
commit 57a20b2
Show file tree

Hide file tree

Showing 31 changed files with 679 additions and 91 deletions.
diff --git a/public/index.html b/public/index.html
@@ -16,7 +16,7 @@
       <title>New Tab</title>
     <% } %>
   </head>
-  <body>
+  <body class="preload">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/public/startup.js b/public/startup.js
@@ -1,8 +1,22 @@
 // Blocking script to avoid the initial background flickering (switching from light to dark)
 // https://stackoverflow.com/a/63033934/3495717
+
+function isDNDModeActive(DNDDuration) {
+  if (DNDDuration === 'always') {
+    return true
+  } else if (typeof DNDDuration === 'object') {
+    return Boolean(DNDDuration.value && DNDDuration.countdown - new Date().getTime() > 0)
+  } else {
+    return false
+  }
+}
 try {
-  var theme = JSON.parse(localStorage.preferences_storage).theme || 'dark'
+  var state = JSON.parse(localStorage.preferences_storage).state
+  var theme = state.theme || 'dark'
   document.documentElement.classList.add(theme)
-} catch (e) {
-  console.log(e)
-}
+
+  var DNDDuration = state.DNDDuration || 'never'
+  if (isDNDModeActive(DNDDuration)) {
+    document.documentElement.classList.add('dndState')
+  }
+} catch (e) {}
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,43 @@
 import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import 'src/assets/App.css'
-import { Header } from 'src/components/Layout'
+import { DNDLayout, Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInDays } from 'src/utils/DateUtils'
-import { AppContentLayout, ScrollCardsNavigator } from './components/Layout'
+import { AppContentLayout } from './components/Layout'
 import { isWebOrExtensionVersion } from './utils/Environment'
 import { getAppVersion } from './utils/Os'
 
 const OnboardingModal = React.lazy(() =>
   import('src/features/onboarding').then((module) => ({ default: module.OnboardingModal }))
 )
 
+const intersectionCallback = (entries) => {
+  entries.forEach((entry) => {
+    if (!entry.isIntersecting) {
+      document.documentElement.classList.remove('dndState')
+    } else {
+      document.documentElement.classList.add('dndState')
+    }
+  })
+}
+
 function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [showOnboarding, setShowOnboarding] = useState(true)
-  const { onboardingCompleted, firstSeenDate, markOnboardingAsCompleted, maxVisibleCards } =
-    useUserPreferences()
+  const {
+    onboardingCompleted,
+    firstSeenDate,
+    markOnboardingAsCompleted,
+    maxVisibleCards,
+    isDNDModeActive,
+    DNDDuration,
+    setDNDDuration,
+  } = useUserPreferences()
 
   useLayoutEffect(() => {
     if (!onboardingCompleted && getAppVersion() <= '1.15.9') {
@@ -32,16 +49,40 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onboardingCompleted, firstSeenDate])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards)
   }, [maxVisibleCards])
 
   useEffect(() => {
+    document.body.classList.remove('preload')
     setupAnalytics()
     setupIdentification()
-    trackPageView('home')
   }, [])
 
+  useEffect(() => {
+    trackPageView('home', isDNDModeActive())
+    if (!isDNDModeActive() && DNDDuration !== 'never') {
+      setDNDDuration('never')
+    }
+  }, [DNDDuration, isDNDModeActive, setDNDDuration])
+
+  useLayoutEffect(() => {
+    let dndContent = document.querySelector('.DNDContent')
+    let observer = new IntersectionObserver(intersectionCallback, {
+      threshold: 0.1,
+    })
+
+    if (dndContent) {
+      observer.observe(dndContent)
+    } else {
+      document.documentElement.classList.remove('dndState')
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [DNDDuration])
+
   return (
     <>
       <MarketingBanner />
@@ -61,8 +102,11 @@ function App() {
           showSettings={showSettings}
           setShowSettings={setShowSettings}
         />
-        <ScrollCardsNavigator />
-        <AppContentLayout setShowSettings={setShowSettings} />
+
+        <div className="layoutLayers hideScrollBar">
+          {isDNDModeActive() && <DNDLayout />}
+          <AppContentLayout setShowSettings={setShowSettings} />
+        </div>
         <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
       </div>
     </>

diff --git a/src/assets/App.css b/src/assets/App.css
@@ -3,12 +3,14 @@
 html {
   background: var(--background-color);
   scroll-behavior: smooth;
+  overflow: hidden;
 }
 body {
   color: var(--primary-text-color);
   font-family: 'nunito';
   font-size: 100%;
 }
+
 .transitionBgColor {
   transition: background-color 0.3s ease-in-out;
 }
@@ -36,6 +38,7 @@ a {
   color: var(--primary-text-color);
   display: flex;
   flex-direction: column;
+  height: 100vh;
 }
 .errorMsg {
   text-align: center;
@@ -62,8 +65,11 @@ a {
   align-items: center;
   align-content: center;
   flex-wrap: wrap;
-  height: 86px;
+  height: 10vh;
   margin: 0.5% 1% 0px 1%;
+  position: sticky;
+  z-index: 1;
+  top: 0;
 }
 
 .AppFooter {
@@ -91,18 +97,19 @@ a {
 
 .AppContent {
   position: relative;
-  overflow-y: hidden;
-  padding: 12px 0;
+  margin: 0;
 }
 .Cards {
-  padding: 1%;
   flex: 1 1 auto;
   display: flex;
   gap: 12px;
   position: relative;
   overflow-y: hidden;
+  justify-content: space-between;
   scroll-snap-type: x mandatory;
   scroll-padding-left: 12px;
+  padding-top: 2vh;
+  height: 87vh;
 }
 .HorizontalScroll {
   -ms-overflow-style: none;
@@ -114,10 +121,7 @@ a {
 
 .extras {
   flex-direction: row;
-  margin-right: 16px;
   align-content: center;
-
-  transition: width, left, right, 0.3s;
 }
 .darkModeBtn {
   background-color: var(--dark-mode-background-color) !important;
@@ -140,6 +144,7 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.4s linear;
 }
 .extraTextBtn {
   padding: 0 16px;
@@ -199,7 +204,7 @@ a {
   border-radius: 10px;
   overflow: hidden;
   flex-direction: column;
-  height: 82vh;
+  height: 98%;
   width: 10vw;
   flex: 0 0 auto;
   scroll-snap-align: start;
@@ -490,6 +495,8 @@ a {
   flex-wrap: wrap;
   gap: 4px;
   margin-top: 24px;
+  transition: all 0.3s ease-out;
+  opacity: 1;
 }
 
 .tag {
@@ -772,6 +779,8 @@ Producthunt item
   position: relative;
   margin: 0 auto;
   margin-top: 6px;
+  transition: all 0.3s ease-out;
+  opacity: 1;
 }
 .searchBarIcon {
   position: absolute;
@@ -850,7 +859,7 @@ Producthunt item
 
 .scrollButton {
   border: none;
-  position: fixed;
+  position: absolute;
   top: 45%;
   margin: 0 1%;
   background-color: var(--card-action-button-background);
@@ -1097,7 +1106,7 @@ Producthunt item
   }
   .block {
     width: calc(
-      (1800px - 14px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
+      (1800px - 20px * min(5, var(--max-visible-cards))) / min(5, var(--max-visible-cards))
     );
   }
 }
@@ -1125,6 +1134,37 @@ Producthunt item
   position: relative;
   vertical-align: middle;
 }
+.layoutLayers {
+  scroll-snap-type: y mandatory;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow-y: scroll;
+  margin: 0 1%;
+}
+.layoutLayers > * {
+  scroll-snap-align: end;
+}
+
+/*Helpers */
 .noMargin {
   margin: 0 !important;
 }
+.marginLeftAuto {
+  margin-left: auto;
+}
+
+.hideScrollBar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none;
+}
+
+.preload * {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -ms-transition: none !important;
+  -o-transition: none !important;
+}
diff --git a/src/assets/baidu_logo.svg b/src/assets/baidu_logo.svg
diff --git a/src/assets/bing_logo.svg b/src/assets/bing_logo.svg