Rework player state handling in the frontend

Dockerfile

@@ -18,7 +18,8 @@ FROM debian:buster AS base
 
 # Install normal dependencies
 RUN apt-get update
-RUN apt-get -y --no-install-recommends install python3 python3-pip python3-setuptools python3-openssl netbase nginx redis-server supervisor build-essential python3-dev
+RUN apt-get -y --no-install-recommends install python3 python3-pip python3-setuptools python3-openssl netbase nginx redis-server supervisor build-essential python3-dev rustc cargo
+RUN pip3 install pip --user --upgrade
 
 
 # Build dev-image

lecture2gether-vue/src/components/Player.vue

@@ -39,15 +39,6 @@ require('videojs-youtube/dist/Youtube');
 export default class L2gPlayer extends Vue {
     // To avoid re-sending the received events to the other users, we set the following flags
     // They are set to true when the user interacts with the player and set to false when he receives his own state
-    skipNextPauseSend = false;
-
-    skipNextPlaySend = false;
-
-    skipNextSecondsSend = false;
-
-    skipNextPlaybackRateSend = false;
-
-    skipNextVideoURLSend = false;
 
     // The first play and first seek happen when the big play button is pressed
     // We do not want to send these events
@@ -121,40 +112,26 @@ export default class L2gPlayer extends Vue {
             // this is necessary to recalculate the time we should have reached in the video
             this.firstPlay = false;
             this.$store.dispatch('joinRoom', this.$store.state.rooms.roomId);
-            return;
-        }
-        if (this.playPauseAfterFirstSeek) {
-            // We now have the correct time and pause state and can set the player's pause state accordingly.
-            // Then, we are ready to be a regular player and the setup is finished.
-            this.onPausedChange();
-            this.playPauseAfterFirstSeek = false;
-            return;
+
+            return
         }
-        if (this.skipNextPlaySend) {
-            this.skipNextPlaySend = false;
-            return;
+        if (this.$store.state.player.paused != false){
+            this.$store.dispatch('setVideoState', {
+                paused: false,
+                seconds: this.player.currentTime(),
+                playbackRate: this.$store.state.player.playbackRate,
+            });
         }
-        this.$store.dispatch('setVideoState', {
-            paused: false,
-            seconds: this.player.currentTime(),
-            playbackRate: this.player.playbackRate(),
-        });
     }
 
     onPlayerPause() {
-        if (this.playPauseAfterFirstSeek) {
-            this.playPauseAfterFirstSeek = false;
-            return;
-        }
-        if (this.skipNextPauseSend) {
-            this.skipNextPauseSend = false;
-            return;
+        if (this.$store.state.player.paused != true){
+            this.$store.dispatch('setVideoState', {
+                paused: true,
+                seconds: this.player.currentTime(),
+                playbackRate: this.$store.state.player.playbackRate,
+            });
         }
-        this.$store.dispatch('setVideoState', {
-            paused: true,
-            seconds: this.player.currentTime(),
-            playbackRate: this.player.playbackRate(),
-        });
     }
 
     onPlayerSeeked() {
@@ -164,29 +141,22 @@ export default class L2gPlayer extends Vue {
             // That triggers an update of onSecondsChange to set the player to the correct time.
             // Finally, we have to adjust the play state. That's what playPauseAfterFirstSeek is for.
             this.firstSeek = false;
-            this.playPauseAfterFirstSeek = true;
             return;
         }
-        if (this.skipNextSecondsSend) {
-            this.skipNextSecondsSend = false;
-            return;
+        if (this.$store.state.player.seconds != this.player.currentTime()){
+            this.$store.dispatch('setVideoState', {
+                paused: this.$store.state.player.paused,
+                seconds: this.player.currentTime(),
+                playbackRate: this.$store.state.player.playbackRate,
+            });
         }
-        this.$store.dispatch('setVideoState', {
-            paused: this.player.paused(),
-            seconds: this.player.currentTime(),
-            playbackRate: this.player.playbackRate(),
-        });
     }
 
     onPlayerRate() {
         if (this.player.playbackRate() !== this.$store.state.player.playbackRate) {
-            if (this.skipNextPlaybackRateSend) {
-                this.skipNextPlaybackRateSend = false;
-                return;
-            }
             this.$store.dispatch('setVideoState', {
-                paused: this.player.paused(),
-                seconds: this.player.currentTime(),
+                paused: this.$store.state.player.paused,
+                seconds: this.$store.state.player.seconds,
                 playbackRate: this.player.playbackRate(),
             });
         }
@@ -206,49 +176,27 @@ export default class L2gPlayer extends Vue {
 
     @Watch('$store.state.player.paused')
     async onPausedChange() {
-        if (this.$store.state.player.sender === this.$store.state.socketId) {
-            this.skipNextPauseSend = false;
-            this.skipNextPlaySend = false;
-            return;
-        }
         if (this.$store.state.player.paused) {
-            this.skipNextPauseSend = true;
             this.player.pause();
         } else {
-            this.skipNextPlaySend = true;
             this.player.play();
         }
     }
 
     @Watch('$store.state.player.seconds')
     async onSecondsChange() {
-        if (this.$store.state.player.sender === this.$store.state.socketId) {
-            this.skipNextSecondsSend = false;
-            return;
-        }
         if (Math.abs(this.player.currentTime() - this.$store.state.player.seconds) > 1) {
-            this.skipNextSecondsSend = true;
             this.player.currentTime(this.$store.state.player.seconds);
         }
     }
 
     @Watch('$store.state.player.videoUrl')
     async onURLChange() {
-        if (this.$store.state.player.sender === this.$store.state.socketId) {
-            this.skipNextVideoURLSend = false;
-            return;
-        }
-        this.skipNextVideoURLSend = true;
         this.player.src(this.getSourceFromURL(this.$store.state.player.videoUrl));
     }
 
     @Watch('$store.state.player.playbackRate')
     async onPlayerRateChange() {
-        if (this.$store.state.player.sender === this.$store.state.socketId) {
-            this.skipNextPlaybackRateSend = false;
-            return;
-        }
-        this.skipNextPlaybackRateSend = true;
         this.player.playbackRate(this.$store.state.player.playbackRate);
     }
 }

lecture2gether-vue/src/plugins/socket.io.ts

@@ -65,14 +65,11 @@ export const connect = (store: Store<any>) => {
         if (!state.paused) {
             seconds = Math.max(0, (state.currentTime - state.setTime) * state.playbackRate + state.seconds);
         }
+        state.seconds = seconds;
         store.commit('setSender', state.sender);
-        store.commit('setVideoState', {
-            seconds,
-            paused: state.paused,
-            playbackRate: state.playbackRate,
-        })
-        store.commit('setVideoMetaData', state.videoMetaData)
-        store.commit('setUrl', state.videoUrl)
+        store.commit('setVideoState', state);
+        store.commit('setVideoMetaData', state.videoMetaData);
+        store.commit('setUrl', state.videoUrl);
     });
 
     socket.on(receivedEvents.roomUserCountUpdated, (event: RoomUserCountEvent) => {

lecture2gether-vue/src/plugins/store/player.ts

@@ -5,8 +5,8 @@ import { VideoMetaData } from '@/api'
 export class PlayerState {
     videoMetaData: VideoMetaData|null = null;
     videoUrl: string = '';
-    paused: boolean = false;
-    seconds: number = 0;
+    paused: boolean = true;
+    seconds: number = -1;
     playbackRate: number = 1;
     password = ''
     auth = AuthState.UNNECESSARY
@@ -41,7 +41,7 @@ export const playerModule: Module<PlayerState, any> = {
         },
         setSender: (state, payload) => {
             state.sender = payload;
-        }
+        },
     },
 
     actions: {

lecture2gether_flask/app.py

@@ -175,8 +175,8 @@ def on_create(init_state):
             break
 
     # Annotate state with timestamp
-    state = add_current_time_to_state(init_state)
-    state = add_set_time_to_state(state)
+    state = add_set_time_to_state(init_state)
+    state = add_current_time_to_state(state)
 
     # Create room in db
     room = {'state': state, 'count': 1}
@@ -282,8 +282,8 @@ def on_video_state_set(state):
         return {'status_code': 403}, 403
 
     # Annotate state with server timestamp
-    state = add_current_time_to_state(state)
     state = add_set_time_to_state(state)
+    state = add_current_time_to_state(state)
 
     # Get room from db
     room = json.loads(db.hget('rooms', room_token))