Track Watched Amount in LocalStorage

[Apezdr]

I've written up a component to include inside of the MediaProvider to track the amount of the video the user has watched. I wanted to share it with the community because it took me a good little while to get it sorted (embarrassingly so..); if this helps you feel free to share the love!

<MediaPlayer
    title={`${mediaTitle ? decodeURIComponent(mediaTitle) + ' - ' : ''}${title}`}
    src={videoURL}
    autoplay={true}
    streamType="on-demand"
    playsinline
    load="eager"
    aspectRatio="16/9"
    fullscreenOrientation="landscape"
>
  <MediaProvider>
    <WithPlaybackTracker videoURL={videoURL} />
  </MediaProvider>
  <DefaultVideoLayout
    icons={defaultLayoutIcons}
    thumbnails={thumbnailURL}
    style={{
      '--video-brand': '#f5f5f5',
    }}
  />
</MediaPlayer>

In my WithPlaybackTracker component:

'use client'

import { useEffect } from 'react'
import { useMediaPlayer } from '@vidstack/react'

export default function WithPlayBackTracker({ videoURL }) {
  const player = useMediaPlayer()

  useEffect(() => {
    if (!player) return

    // Retrieve the saved playback time from local storage
    const savedTime = parseFloat(localStorage.getItem(videoURL))

    // Function to handle time updates
    const handleTimeUpdate = ({ currentTime, started, waiting }) => {
      if (started && !waiting && currentTime !== savedTime) {
        localStorage.setItem(videoURL, currentTime.toString())
      }
    }

    return player.subscribe(({ currentTime, started, waiting }) => {
      if (savedTime && savedTime !== player.currentTime && !started) {
        player.currentTime = savedTime
      }
      handleTimeUpdate({ currentTime: currentTime, started: started, waiting: waiting })
    })
  }, [videoURL, player])

  return null // This component does not render anything
}

[Apezdr]

I would be interested in some outside perspective on syncing this up with a DB, I use MongoDB myself.

[mihar-22]

Thanks for sharing your solution @Apezdr! We have a storage solution coming in the next release which will handle this for you and a few other player settings such as volume and captions:

// Coming soon!
<MediaPlayer storageKey="my-player" />

If you want to handle this yourself, here's an alternative solution:

function WithPlaybackTracking({ videoURL }) {
  const canPlay = useMediaState('canPlay'),
    remote = useMediaRemote();
    
  useEffect(() => {
   if (!canPlay) return;
   const savedTime = parseFloat(localStorage.getItem(videoURL));
    if (!isNaN(savedTime)) remote.seek(savedTime);
  }, [remote, canPlay, videoURL]);
  
  useEffect(() => {
    if (!player || !canPlay) return;
    return player.subscribe(({ currentTime }) => {
      localStorage.setItem(videoURL, currentTime + '');
    });
  }, [player, canPlay, videoURL]);
}

[mihar-22]

Not yet but we could expose a MediaStorage interface so you can implement your own and possibly pass it in as a property. It could look something like this:

class MediaDatabaseStorage implements MediaStorage {
  // implement interface...
}

const storage = useMemo(() => new MediaDatabaseStorage(), []);

<MediaPlayer storage={storage} />

How's that sound? Any suggestions or better ideas?

[mihar-22]

I've implemented a MediaStorage interface that will be coming in the next release. You will be able to set the new player storage prop to a string to use our local storage implementation, or you can provide your own storage object.

[convivitybackendteam]

Hello @mihar-22,

Thank you for your excellent work. I've tested your code, and it functions well with Mux, but not with YouTube. This issue might be related to the seek interface. The video begins and the player indicates it's playing, but there's no actual playback.

Additionally, the progress in Mux remains at zero despite having sought the video for a few seconds. However, when I press play, it starts from the correct position.

I have attached the screenshot of the issue for both.

MUX

Youtube

import { useMediaRemote, useMediaState } from '@vidstack/react';
import { useEffect } from 'react';

function WithPlaybackTracking({ link }: any) {
  let canPlay = useMediaState('canPlay'),
    duration = useMediaState('duration'),
    remote = useMediaRemote();

  useEffect(() => {
    console.log('himanshu');
    if (!canPlay) return;
   //for now i am just using static value
    const savedTime = parseFloat('200');
    if (!isNaN(savedTime)) remote.seek(savedTime);
  }, [remote, canPlay, link]);
  return null;
}
export default WithPlaybackTracking;

[mihar-22]

Thank you for testing it! I admittedly didn't test the snippet. There's a lot of bug fixes and improvements coming in the next release which should resolve the issues mentioned. I'll revisit this after the release and update with working snippet. As mentioned, we do have a storage solution coming!

[convivitybackendteam]

@mihar-22 thank you so much for all the great work you do!