Allow linking to specific timestamp (#226)

* create useRouterQuery hook

* implement timestamps from query string

* cr fixes

* cr fixes

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './usePersonalData'
+export * from './useRouterQuery'

src/hooks/useRouterQuery/index.ts

@@ -0,0 +1 @@
+export * from './useRouterQuery'

src/hooks/useRouterQuery/useRouterQuery.tsx

@@ -0,0 +1,6 @@
+import { useLocation } from '@reach/router'
+
+export const useRouterQuery = (queryParam: string) => {
+  const search = new URLSearchParams(useLocation().search)
+  return search.get(queryParam)
+}

src/views/VideoView/VideoView.tsx

@@ -24,7 +24,7 @@ import { formatVideoViewsAndDate } from '@/utils/video'
 import { AddVideoView, AddVideoViewVariables } from '@/api/queries/__generated__/AddVideoView'
 
 import { ChannelLink, InfiniteVideoGrid } from '@/components'
-import { usePersonalData } from '@/hooks'
+import { usePersonalData, useRouterQuery } from '@/hooks'
 
 const VideoView: React.FC<RouteComponentProps> = () => {
   const { id } = useParams()
@@ -33,6 +33,7 @@ const VideoView: React.FC<RouteComponentProps> = () => {
   })
   const [addVideoView] = useMutation<AddVideoView, AddVideoViewVariables>(ADD_VIDEO_VIEW)
   const { state, updateWatchedVideos } = usePersonalData()
+  const timestampFromQuery = Number(useRouterQuery('time'))
 
   const [startTimestamp, setStartTimestamp] = useState<number>()
   useEffect(() => {
@@ -40,8 +41,17 @@ const VideoView: React.FC<RouteComponentProps> = () => {
       return
     }
     const currentVideo = state.watchedVideos.find((v) => v.id === data?.video?.id)
+
     setStartTimestamp(currentVideo?.__typename === 'INTERRUPTED' ? currentVideo.timestamp : 0)
-  }, [data?.video?.id, state.watchedVideos, startTimestamp])
+  }, [data?.video?.id, state.watchedVideos, startTimestamp, data?.video?.duration])
+
+  useEffect(() => {
+    const duration = data?.video?.duration ?? 0
+    if (!timestampFromQuery || timestampFromQuery > duration) {
+      return
+    }
+    setStartTimestamp(timestampFromQuery)
+  }, [data?.video?.duration, timestampFromQuery])
 
   const channelId = data?.video?.channel.id
   const videoId = data?.video?.id