Bugfix/layout fixes (#663)

* feat: add player to tldr * feat: update media players * fix: linter fix * feat: update lint * feat: fix getLsat * fix: change file path * feat: remove extra player * feat: add unit tests, refactored some code, player is visible on loading * feat: added unit test --------- Co-authored-by: Расул <[email protected]> Co-authored-by: kevkevin <[email protected]>
stakwork · Dec 8, 2023 · 58a0d2a · 58a0d2a
1 parent ae9e419
commit 58a0d2a
Show file tree

Hide file tree

Showing 12 changed files with 1,468 additions and 45 deletions.
diff --git a/build/assets/index-9a4cd8a9.css b/build/assets/index-9a4cd8a9.css
diff --git a/build/assets/web-vitals-60d3425a.js b/build/assets/web-vitals-60d3425a.js
@@ -1 +1,258 @@
-var m,l,C,T,f=function(t,e){return{name:t,value:e===void 0?-1:e,delta:0,entries:[],id:"v2-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},h=function(t,e){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){if(t==="first-input"&&!("PerformanceEventTiming"in self))return;var i=new PerformanceObserver(function(a){return a.getEntries().map(e)});return i.observe({type:t,buffered:!0}),i}}catch{}},y=function(t,e){var i=function a(n){n.type!=="pagehide"&&document.visibilityState!=="hidden"||(t(n),e&&(removeEventListener("visibilitychange",a,!0),removeEventListener("pagehide",a,!0)))};addEventListener("visibilitychange",i,!0),addEventListener("pagehide",i,!0)},g=function(t){addEventListener("pageshow",function(e){e.persisted&&t(e)},!0)},v=function(t,e,i){var a;return function(n){e.value>=0&&(n||i)&&(e.delta=e.value-(a||0),(e.delta||a===void 0)&&(a=e.value,t(e)))}},p=-1,w=function(){return document.visibilityState==="hidden"?0:1/0},F=function(){y(function(t){var e=t.timeStamp;p=e},!0)},S=function(){return p<0&&(p=w(),F(),g(function(){setTimeout(function(){p=w(),F()},0)})),{get firstHiddenTime(){return p}}},A=function(t,e){var i,a=S(),n=f("FCP"),o=function(c){c.name==="first-contentful-paint"&&(u&&u.disconnect(),c.startTime<a.firstHiddenTime&&(n.value=c.startTime,n.entries.push(c),i(!0)))},r=window.performance&&performance.getEntriesByName&&performance.getEntriesByName("first-contentful-paint")[0],u=r?null:h("paint",o);(r||u)&&(i=v(t,n,e),r&&o(r),g(function(c){n=f("FCP"),i=v(t,n,e),requestAnimationFrame(function(){requestAnimationFrame(function(){n.value=performance.now()-c.timeStamp,i(!0)})})}))},b=!1,E=-1,R=function(t,e){b||(A(function(s){E=s.value}),b=!0);var i,a=function(s){E>-1&&t(s)},n=f("CLS",0),o=0,r=[],u=function(s){if(!s.hadRecentInput){var B=r[0],q=r[r.length-1];o&&s.startTime-q.startTime<1e3&&s.startTime-B.startTime<5e3?(o+=s.value,r.push(s)):(o=s.value,r=[s]),o>n.value&&(n.value=o,n.entries=r,i())}},c=h("layout-shift",u);c&&(i=v(a,n,e),y(function(){c.takeRecords().map(u),i(!0)}),g(function(){o=0,E=-1,n=f("CLS",0),i=v(a,n,e)}))},d={passive:!0,capture:!0},H=new Date,P=function(t,e){m||(m=e,l=t,C=new Date,k(removeEventListener),D())},D=function(){if(l>=0&&l<C-H){var t={entryType:"first-input",name:m.type,target:m.target,cancelable:m.cancelable,startTime:m.timeStamp,processingStart:m.timeStamp+l};T.forEach(function(e){e(t)}),T=[]}},I=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;t.type=="pointerdown"?function(i,a){var n=function(){P(i,a),r()},o=function(){r()},r=function(){removeEventListener("pointerup",n,d),removeEventListener("pointercancel",o,d)};addEventListener("pointerup",n,d),addEventListener("pointercancel",o,d)}(e,t):P(e,t)}},k=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach(function(e){return t(e,I,d)})},M=function(t,e){var i,a=S(),n=f("FID"),o=function(u){u.startTime<a.firstHiddenTime&&(n.value=u.processingStart-u.startTime,n.entries.push(u),i(!0))},r=h("first-input",o);i=v(t,n,e),r&&y(function(){r.takeRecords().map(o),r.disconnect()},!0),r&&g(function(){var u;n=f("FID"),i=v(t,n,e),T=[],l=-1,m=null,k(addEventListener),u=o,T.push(u),D()})},L={},N=function(t,e){var i,a=S(),n=f("LCP"),o=function(c){var s=c.startTime;s<a.firstHiddenTime&&(n.value=s,n.entries.push(c),i())},r=h("largest-contentful-paint",o);if(r){i=v(t,n,e);var u=function(){L[n.id]||(r.takeRecords().map(o),r.disconnect(),L[n.id]=!0,i(!0))};["keydown","click"].forEach(function(c){addEventListener(c,u,{once:!0,capture:!0})}),y(u,!0),g(function(c){n=f("LCP"),i=v(t,n,e),requestAnimationFrame(function(){requestAnimationFrame(function(){n.value=performance.now()-c.timeStamp,L[n.id]=!0,i(!0)})})})}},O=function(t){var e,i=f("TTFB");e=function(){try{var a=performance.getEntriesByType("navigation")[0]||function(){var n=performance.timing,o={entryType:"navigation",startTime:0};for(var r in n)r!=="navigationStart"&&r!=="toJSON"&&(o[r]=Math.max(n[r]-n.navigationStart,0));return o}();if(i.value=i.delta=a.responseStart,i.value<0||i.value>performance.now())return;i.entries=[a],t(i)}catch{}},document.readyState==="complete"?setTimeout(e,0):addEventListener("load",function(){return setTimeout(e,0)})};export{R as getCLS,A as getFCP,M as getFID,N as getLCP,O as getTTFB};
+var m,
+  l,
+  C,
+  T,
+  f = function (t, e) {
+    return {
+      name: t,
+      value: e === void 0 ? -1 : e,
+      delta: 0,
+      entries: [],
+      id: 'v2-'.concat(Date.now(), '-').concat(Math.floor(8999999999999 * Math.random()) + 1e12),
+    }
+  },
+  h = function (t, e) {
+    try {
+      if (PerformanceObserver.supportedEntryTypes.includes(t)) {
+        if (t === 'first-input' && !('PerformanceEventTiming' in self)) return
+        var i = new PerformanceObserver(function (a) {
+          return a.getEntries().map(e)
+        })
+        return i.observe({ type: t, buffered: !0 }), i
+      }
+    } catch {}
+  },
+  y = function (t, e) {
+    var i = function a(n) {
+      ;(n.type !== 'pagehide' && document.visibilityState !== 'hidden') ||
+        (t(n), e && (removeEventListener('visibilitychange', a, !0), removeEventListener('pagehide', a, !0)))
+    }
+    addEventListener('visibilitychange', i, !0), addEventListener('pagehide', i, !0)
+  },
+  g = function (t) {
+    addEventListener(
+      'pageshow',
+      function (e) {
+        e.persisted && t(e)
+      },
+      !0,
+    )
+  },
+  v = function (t, e, i) {
+    var a
+    return function (n) {
+      e.value >= 0 && (n || i) && ((e.delta = e.value - (a || 0)), (e.delta || a === void 0) && ((a = e.value), t(e)))
+    }
+  },
+  p = -1,
+  w = function () {
+    return document.visibilityState === 'hidden' ? 0 : 1 / 0
+  },
+  F = function () {
+    y(function (t) {
+      var e = t.timeStamp
+      p = e
+    }, !0)
+  },
+  S = function () {
+    return (
+      p < 0 &&
+        ((p = w()),
+        F(),
+        g(function () {
+          setTimeout(function () {
+            ;(p = w()), F()
+          }, 0)
+        })),
+      {
+        get firstHiddenTime() {
+          return p
+        },
+      }
+    )
+  },
+  A = function (t, e) {
+    var i,
+      a = S(),
+      n = f('FCP'),
+      o = function (c) {
+        c.name === 'first-contentful-paint' &&
+          (u && u.disconnect(), c.startTime < a.firstHiddenTime && ((n.value = c.startTime), n.entries.push(c), i(!0)))
+      },
+      r =
+        window.performance && performance.getEntriesByName && performance.getEntriesByName('first-contentful-paint')[0],
+      u = r ? null : h('paint', o)
+    ;(r || u) &&
+      ((i = v(t, n, e)),
+      r && o(r),
+      g(function (c) {
+        ;(n = f('FCP')),
+          (i = v(t, n, e)),
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              ;(n.value = performance.now() - c.timeStamp), i(!0)
+            })
+          })
+      }))
+  },
+  b = !1,
+  E = -1,
+  R = function (t, e) {
+    b ||
+      (A(function (s) {
+        E = s.value
+      }),
+      (b = !0))
+    var i,
+      a = function (s) {
+        E > -1 && t(s)
+      },
+      n = f('CLS', 0),
+      o = 0,
+      r = [],
+      u = function (s) {
+        if (!s.hadRecentInput) {
+          var B = r[0],
+            q = r[r.length - 1]
+          o && s.startTime - q.startTime < 1e3 && s.startTime - B.startTime < 5e3
+            ? ((o += s.value), r.push(s))
+            : ((o = s.value), (r = [s])),
+            o > n.value && ((n.value = o), (n.entries = r), i())
+        }
+      },
+      c = h('layout-shift', u)
+    c &&
+      ((i = v(a, n, e)),
+      y(function () {
+        c.takeRecords().map(u), i(!0)
+      }),
+      g(function () {
+        ;(o = 0), (E = -1), (n = f('CLS', 0)), (i = v(a, n, e))
+      }))
+  },
+  d = { passive: !0, capture: !0 },
+  H = new Date(),
+  P = function (t, e) {
+    m || ((m = e), (l = t), (C = new Date()), k(removeEventListener), D())
+  },
+  D = function () {
+    if (l >= 0 && l < C - H) {
+      var t = {
+        entryType: 'first-input',
+        name: m.type,
+        target: m.target,
+        cancelable: m.cancelable,
+        startTime: m.timeStamp,
+        processingStart: m.timeStamp + l,
+      }
+      T.forEach(function (e) {
+        e(t)
+      }),
+        (T = [])
+    }
+  },
+  I = function (t) {
+    if (t.cancelable) {
+      var e = (t.timeStamp > 1e12 ? new Date() : performance.now()) - t.timeStamp
+      t.type == 'pointerdown'
+        ? (function (i, a) {
+            var n = function () {
+                P(i, a), r()
+              },
+              o = function () {
+                r()
+              },
+              r = function () {
+                removeEventListener('pointerup', n, d), removeEventListener('pointercancel', o, d)
+              }
+            addEventListener('pointerup', n, d), addEventListener('pointercancel', o, d)
+          })(e, t)
+        : P(e, t)
+    }
+  },
+  k = function (t) {
+    ;['mousedown', 'keydown', 'touchstart', 'pointerdown'].forEach(function (e) {
+      return t(e, I, d)
+    })
+  },
+  M = function (t, e) {
+    var i,
+      a = S(),
+      n = f('FID'),
+      o = function (u) {
+        u.startTime < a.firstHiddenTime && ((n.value = u.processingStart - u.startTime), n.entries.push(u), i(!0))
+      },
+      r = h('first-input', o)
+    ;(i = v(t, n, e)),
+      r &&
+        y(function () {
+          r.takeRecords().map(o), r.disconnect()
+        }, !0),
+      r &&
+        g(function () {
+          var u
+          ;(n = f('FID')),
+            (i = v(t, n, e)),
+            (T = []),
+            (l = -1),
+            (m = null),
+            k(addEventListener),
+            (u = o),
+            T.push(u),
+            D()
+        })
+  },
+  L = {},
+  N = function (t, e) {
+    var i,
+      a = S(),
+      n = f('LCP'),
+      o = function (c) {
+        var s = c.startTime
+        s < a.firstHiddenTime && ((n.value = s), n.entries.push(c), i())
+      },
+      r = h('largest-contentful-paint', o)
+    if (r) {
+      i = v(t, n, e)
+      var u = function () {
+        L[n.id] || (r.takeRecords().map(o), r.disconnect(), (L[n.id] = !0), i(!0))
+      }
+      ;['keydown', 'click'].forEach(function (c) {
+        addEventListener(c, u, { once: !0, capture: !0 })
+      }),
+        y(u, !0),
+        g(function (c) {
+          ;(n = f('LCP')),
+            (i = v(t, n, e)),
+            requestAnimationFrame(function () {
+              requestAnimationFrame(function () {
+                ;(n.value = performance.now() - c.timeStamp), (L[n.id] = !0), i(!0)
+              })
+            })
+        })
+    }
+  },
+  O = function (t) {
+    var e,
+      i = f('TTFB')
+    ;(e = function () {
+      try {
+        var a =
+          performance.getEntriesByType('navigation')[0] ||
+          (function () {
+            var n = performance.timing,
+              o = { entryType: 'navigation', startTime: 0 }
+            for (var r in n) r !== 'navigationStart' && r !== 'toJSON' && (o[r] = Math.max(n[r] - n.navigationStart, 0))
+            return o
+          })()
+        if (((i.value = i.delta = a.responseStart), i.value < 0 || i.value > performance.now())) return
+        ;(i.entries = [a]), t(i)
+      } catch {}
+    }),
+      document.readyState === 'complete'
+        ? setTimeout(e, 0)
+        : addEventListener('load', function () {
+            return setTimeout(e, 0)
+          })
+  }
+export { R as getCLS, A as getFCP, M as getFID, N as getLCP, O as getTTFB }
diff --git a/build/index.html b/build/index.html
@@ -22,15 +22,14 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Second Brain</title>
-    <script type="module" crossorigin src="/assets/index-411fa8e0.js"></script>
-    <link rel="stylesheet" href="/assets/index-9a4cd8a9.css">
+    <script type="module" crossorigin src="/assets/index-d133d78b.js"></script>
+    <link rel="stylesheet" href="/assets/index-9a4cd8a9.css" />
   </head>
   <body style="background: #000">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!-- Add entry point 👇 -->
-
-
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/App/ActionsToolbar/PlayerControl/index.tsx b/src/components/App/ActionsToolbar/PlayerControl/index.tsx
@@ -14,7 +14,7 @@ import { Equalizer } from './Equalizer'
 
 export const PlayerControl = () => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const [shouldScroll, setShouldScroll] = useState(0)
+  const [scrollWidth, setScrollWidth] = useState(0)
   const selectedNode = useSelectedNode()
 
   const sidebarIsOpen = useAppStore((s) => s.sidebarIsOpen)
@@ -39,7 +39,7 @@ export const PlayerControl = () => {
     const containerWidth = containerRef.current?.offsetWidth || 0
     const textWidth = containerRef.current?.scrollWidth || 0
 
-    setShouldScroll(textWidth - containerWidth)
+    setScrollWidth(textWidth - containerWidth)
   }, [])
 
   const onClose = () => {
@@ -54,7 +54,7 @@ export const PlayerControl = () => {
         <Avatar src={playingNode.image_url || ''} type={playingNode.node_type} />
         <Info>
           <Container ref={containerRef}>
-            <ScrollText className="title" scrollValue={shouldScroll}>
+            <ScrollText className="title" scrollValue={scrollWidth}>
               {playingNode.episode_title}
             </ScrollText>
             <div className="subtitle">{playingNode.show_title}</div>

diff --git a/src/components/App/ActionsToolbar/index.tsx b/src/components/App/ActionsToolbar/index.tsx
@@ -1,17 +1,18 @@
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
-import { useSelectedNode } from '~/stores/useDataStore'
+import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
 import { CameraRecenterControl } from './CameraRecenterControl'
 import { GraphViewControl } from './GraphViewControl'
 import { PlayerControl } from './PlayerControl'
 
 export const ActionsToolbar = () => {
   const selectedNode = useSelectedNode()
+  const isLoading = useDataStore((s) => s.isFetching)
 
   return (
     <Wrapper align="flex-end" id="actions-toolbar">
-      <CameraRecenterControl />
-      <GraphViewControl />
+      {!isLoading && <CameraRecenterControl />}
+      {!isLoading && <GraphViewControl />}
       <PlayerControl key={selectedNode?.ref_id} />
     </Wrapper>
   )

diff --git a/src/components/App/SideBar/Latest/index.tsx b/src/components/App/SideBar/Latest/index.tsx
@@ -30,7 +30,7 @@ const _View = ({ isSearchResult }: Props) => {
   return (
     <Wrapper>
       {!isSearchResult && (
-        <div className="heading_container">
+        <div className="heading-container">
           <div className="heading">
             <span className="heading__title">Latest</span>
             <span className="heading__icon">
@@ -65,7 +65,7 @@ const ButtonStyled = styled(Button)`
 export const LatestView = memo(_View)
 
 const Wrapper = styled(Flex)`
-  .heading_container {
+  .heading-container {
     display: flex;
     flex-direction: column;
     padding: 16px 24px 16px 24px;

diff --git a/src/components/App/SideBar/SidebarSubView/MediaPlayer/ToolBar/index.tsx b/src/components/App/SideBar/SidebarSubView/MediaPlayer/ToolBar/index.tsx
@@ -6,7 +6,7 @@ import PlayIcon from '~/components/Icons/PlayIcon'
 import VolumeIcon from '~/components/Icons/VolumeIcon'
 import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils'
-import { secondsToHMS } from '~/utils/secondsToMediaTime'
+import { secondsToMediaTime } from '~/utils/secondsToMediaTime'
 
 type Props = {
   isPlaying: boolean
@@ -43,9 +43,9 @@ export const Toolbar: FC<Props> = ({
           {!isPlaying ? <PlayIcon /> : <PauseIcon />}
         </Action>
         <TimeStamp direction="row">
-          <span>{secondsToHMS(playingTime)}</span>
+          <span>{secondsToMediaTime(playingTime)}</span>
           <span className="separator">/</span>
-          <span className="duration">{secondsToHMS(duration)}</span>
+          <span className="duration">{secondsToMediaTime(duration)}</span>
         </TimeStamp>
         <VolumeControl direction="row" px={9}>
           <Slider

diff --git a/src/components/App/SideBar/SidebarSubView/index.tsx b/src/components/App/SideBar/SidebarSubView/index.tsx
@@ -31,8 +31,8 @@ export const SideBarSubView = ({ open }: Props) => {
       style={{ width: showTeachMe ? '700px' : '', position: open ? 'relative' : 'absolute' }}
     >
       <Wrapper>
+        <MediaPlayer key={playingNode?.ref_id} hidden={selectedNode?.ref_id !== playingNode?.ref_id} />
         <ScrollWrapper>
-          <MediaPlayer key={playingNode?.ref_id} hidden={selectedNode?.ref_id !== playingNode?.ref_id} />
           <SelectedNodeView />
         </ScrollWrapper>
         <CloseButton
@@ -83,10 +83,9 @@ const CloseButton = styled(Flex)`
   }
 `
 
-const ScrollWrapper = styled(Flex)(() => ({
-  height: '100%',
-  width: '100%',
-}))
+const ScrollWrapper = styled(Flex)`
+  flex: 1 1 100%;
+`
 
 const CollapseButton = styled(Flex).attrs({
   align: 'center',