CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add Tooltips To Channel Action Buttons _community pr!_ ([#4090](https://github.com/lbryio/lbry-desktop/pull/4090))
 - Reenabled repost hiding with corresponding repost email suppression ([#4025](https://github.com/lbryio/lbry-desktop/pull/4025))
 - Enabled embeds in markdown posts ([#4060](https://github.com/lbryio/lbry-desktop/pull/4060))
+- Save media position in video viewer _community pr!_ ([#4104](https://github.com/lbryio/lbry-desktop/pull/4104))
 
 ### Changed
 

ui/component/viewers/videoViewer/index.js

@@ -3,6 +3,7 @@ import { makeSelectClaimForUri, makeSelectFileInfoForUri, makeSelectThumbnailFor
 import { doChangeVolume, doChangeMute, doAnalyticsView } from 'redux/actions/app';
 import { selectVolume, selectMute } from 'redux/selectors/app';
 import { savePosition } from 'redux/actions/content';
+import { makeSelectContentPositionForUri } from 'redux/selectors/content';
 import VideoViewer from './view';
 import { withRouter } from 'react-router';
 import { doClaimEligiblePurchaseRewards } from 'lbryinc';
@@ -13,7 +14,7 @@ const select = (state, props) => {
   const { search } = props.location;
   const urlParams = new URLSearchParams(search);
   const autoplay = urlParams.get('autoplay');
-  const position = urlParams.get('t');
+  const position = urlParams.get('t') !== null ? urlParams.get('t') : makeSelectContentPositionForUri(props.uri)(state);
 
   return {
     autoplayIfEmbedded: Boolean(autoplay),

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -15,7 +15,7 @@ export type Player = {
   volume: (?number) => number,
   muted: (?boolean) => boolean,
   dispose: () => void,
-  currentTime: number => void,
+  currentTime: (?number) => number,
 };
 
 type Props = {

ui/component/viewers/videoViewer/view.jsx

@@ -31,6 +31,7 @@ type Props = {
   autoplayIfEmbedded: boolean,
   doAnalyticsView: (string, number) => Promise<any>,
   claimRewards: () => void,
+  savePosition: (string, number) => void,
 };
 
 /*
@@ -54,6 +55,7 @@ function VideoViewer(props: Props) {
     autoplayIfEmbedded,
     doAnalyticsView,
     claimRewards,
+    savePosition,
   } = props;
   const claimId = claim && claim.claim_id;
   const isAudio = contentType.includes('audio');
@@ -104,10 +106,6 @@ function VideoViewer(props: Props) {
     setIsEndededEmbed(false);
   }
 
-  function onPause() {
-    setIsPlaying(false);
-  }
-
   const onPlayerReady = useCallback(
     (player: Player) => {
       if (!embedded) {
@@ -142,7 +140,10 @@ function VideoViewer(props: Props) {
       player.on('tracking:firstplay', doTrackingFirstPlay);
       player.on('ended', onEnded);
       player.on('play', onPlay);
-      player.on('pause', onPause);
+      player.on('pause', () => {
+        setIsPlaying(false);
+        savePosition(uri, player.currentTime());
+      });
       player.on('volumechange', () => {
         if (player && player.volume() !== volume) {
           changeVolume(player.volume());
@@ -155,6 +156,7 @@ function VideoViewer(props: Props) {
       if (position) {
         player.currentTime(position);
       }
+      player.on('dispose', () => savePosition(uri, player.currentTime()));
     },
     [uri]
   );