implementeer speedFactor

backend/src/Room.ts

@@ -39,6 +39,7 @@ export default class Room {
             'timelineName': this.timelineName,
             'seekTime': this.seekTime,
             'readyToParticipate': user.readyToParticipate || this.leader == user,
+            'speedFactor': this.speedFactor
         }
     }
 

backend/src/Service.ts

@@ -55,7 +55,6 @@ export default class Service {
 
     onRequestJoin(socket: Socket, roomId: number): boolean {
         let user = this.getUser(socket);
-        if (!this.roomIdToRooms.has(roomId)) return false;
         if (user.room && user.room.id == roomId) return false;
 
         if (user.room) {
@@ -63,6 +62,10 @@ export default class Service {
             this.deleteEmptyRooms();
         }
 
+        if (!this.roomIdToRooms.has(roomId)) {
+            this.createRoomWithId(roomId);
+        }
+
         let room = this.roomIdToRooms.get(roomId)!!;
         room.join(user);
 

frontend/src/components/FeedItem.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 
 import {TimestampEvent} from "../types/types";
 
-import '../css/feeditem.sass'
+import '../css/feed.sass'
 import shot from "../img/shot.png";
 import song from "../img/song.png";
 import talk from "../img/talk.png";
@@ -14,7 +14,6 @@ const images = {
 
 class FeedItem extends PureComponent<{item: TimestampEvent}> {
     render() {
-        // console.log('feeditem render');
         return (
             <div className="feed-item">
                 <div className="feed-item__title">

frontend/src/components/Lobby.tsx

@@ -105,7 +105,7 @@ const Lobby = (props: any) => {
                 <p>
                     We gaan luisteren naar <b>{room && room.timelineName}</b> en
                     {room?.running && <span> zijn al gestart!</span>}
-                    {!room?.running && <span> starten op {room?.seekTime} seconden</span>}
+                    {!room?.running && <span> starten op {(room?.seekTime || 0) / 1000} seconden</span>}
                 </p>
 
                 <Button

frontend/src/components/Player.ts

@@ -28,10 +28,13 @@ const Player = () => {
             'Time required to seek (seconds): ', diffSecondsRequiredToSeekRunningPlayer);
 
         if (Math.abs(diff) > diffSecondsRequiredToSeekRunningPlayer) {
-            if (timesSeeked < maxTimesSeekAllow) {
+            if (roomRunning.speedFactor != 1 || timesSeeked < maxTimesSeekAllow) {
                 player.current.currentTime = targetTime;
+
+                player.current.playbackRate = Math.max(Math.min(4.0, roomRunning.speedFactor), 0.25);
+
                 setTimesSeeked(timesSeeked + 1);
-                console.log('SEEKED', 'The running player time was seeked, times seeked: ' + timesSeeked);
+                console.log('SEEKED', 'The running player time was seeked, times seeked in total: ' + timesSeeked);
             } else {
                 console.warn('The running player is off, but we\'ve changed the time ' +
                     'too often, skipping synchronizing the player.');

frontend/src/css/feed.sass

@@ -5,10 +5,10 @@
   padding: 10px
   margin: 10px
   text-align: center
-  font-size: 18pt
+  font-size: 16pt
   font-weight: bold
   color: rgba(0, 0, 0, 0.85)
-  box-shadow: 0 0 20px -8px rgba(48, 75, 163, 0.5)
+  box-shadow: 0 0 10px -4px rgba(48, 75, 163, 0.2)
 
 .feed-item__title
   width: 45%

frontend/src/lib/Connection.ts

@@ -91,6 +91,7 @@ class Connection {
             this.requestJoin(lobbyId).then(v => {
                 if (!v) {
                     this.setQueryLobbyId(null);
+                    this.requestJoinRandom();
                 }
             })
         } else {
@@ -309,7 +310,7 @@ export function useRoomTime(): number {
 export function roomTime(): number {
     let room = connection.room.get();
     if (!room) return 0;
-    return connection.serverTime() - room.startTime;
+    return (connection.serverTime() - room.startTime) * room.speedFactor;
 }
 
 export function useIsConnected() {

frontend/src/types/types.ts

@@ -20,9 +20,10 @@ export interface Room {
     isLeader: boolean,
     running: boolean,
     startTime: number,
-    seekTime: string,
+    seekTime: number,
     timelineName: string,
-    readyToParticipate: boolean
+    readyToParticipate: boolean,
+    speedFactor: number
 }
 
 export class RoomOptions {