Keep unplayed state until playback actually starts

Delay clearing the unplayed flag from the play action to the playing
action. This prevents the player from briefly showind the last frame
when playing again having played until the end.

REDMINE-21248

Author: tf

entry_types/scrolled/package/spec/frontend/usePlayerState-spec.js

@@ -238,15 +238,25 @@ describe('usePlayerState', () => {
       expect(nextState.unplayed).toBe(true);
     });
 
-    it('is no longer unplayed after play action', () => {
+    it('is no longer unplayed after playing action', () => {
       const {result} = renderHookInEntry(() => usePlayerState());
       const [,actions] = result.current;
       act(() => actions.play());
+      act(() => actions.playing());
       const [nextState,] = result.current;
 
       expect(nextState.unplayed).toBe(false);
     });
 
+    it('stays unplayed after play action until playing', () => {
+      const {result} = renderHookInEntry(() => usePlayerState());
+      const [,actions] = result.current;
+      act(() => actions.play());
+      const [nextState,] = result.current;
+
+      expect(nextState.unplayed).toBe(true);
+    });
+
     it('becomes unplayed again when video ends to make it return to its initial look', () => {
       const {result} = renderHookInEntry(() => usePlayerState());
       const [,actions] = result.current;

entry_types/scrolled/package/src/frontend/MediaPlayer/usePlayerState.js

@@ -42,14 +42,14 @@ export function playerStateReducer(state, action){
         isLoading: true,
         shouldPlay: true,
         playFailed: false,
-        unplayed: false,
         lastControlledVia: action.payload.via
       };
     case PLAYING:
       return {
         ...state,
         shouldPlay: true,
         isPlaying: true,
+        unplayed: false,
         userIdle: false
       };
     case PLAY_AND_FADE_IN: