From 7031062d4fd8f1ecc7e7ec7ebf0d8296939b3fd4 Mon Sep 17 00:00:00 2001
From: Florens Douwes <florens@svia.nl>
Date: Sat, 25 Apr 2020 00:12:21 +0200
Subject: [PATCH] implementeer speedFactor

---
 backend/src/Room.ts                           | 1 +
 backend/src/Service.ts                        | 5 ++++-
 frontend/src/components/FeedItem.tsx          | 3 +--
 frontend/src/components/Lobby.tsx             | 2 +-
 frontend/src/components/Player.ts             | 7 +++++--
 frontend/src/css/{feeditem.sass => feed.sass} | 4 ++--
 frontend/src/lib/Connection.ts                | 3 ++-
 frontend/src/types/types.ts                   | 5 +++--
 8 files changed, 19 insertions(+), 11 deletions(-)
 rename frontend/src/css/{feeditem.sass => feed.sass} (91%)

diff --git a/backend/src/Room.ts b/backend/src/Room.ts
index 3f04f4b..f22a8fa 100644
--- a/backend/src/Room.ts
+++ b/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
         }
     }
 
diff --git a/backend/src/Service.ts b/backend/src/Service.ts
index a31789d..8a5456e 100644
--- a/backend/src/Service.ts
+++ b/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);
 
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index d906719..bbbc881 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/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">
diff --git a/frontend/src/components/Lobby.tsx b/frontend/src/components/Lobby.tsx
index ba5609d..1bb0863 100644
--- a/frontend/src/components/Lobby.tsx
+++ b/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
diff --git a/frontend/src/components/Player.ts b/frontend/src/components/Player.ts
index b5a01b4..59f82be 100644
--- a/frontend/src/components/Player.ts
+++ b/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.');
diff --git a/frontend/src/css/feeditem.sass b/frontend/src/css/feed.sass
similarity index 91%
rename from frontend/src/css/feeditem.sass
rename to frontend/src/css/feed.sass
index af034c7..1b3e616 100644
--- a/frontend/src/css/feeditem.sass
+++ b/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%
diff --git a/frontend/src/lib/Connection.ts b/frontend/src/lib/Connection.ts
index e4152cb..8c921e9 100644
--- a/frontend/src/lib/Connection.ts
+++ b/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() {
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index ec1eaea..72db078 100644
--- a/frontend/src/types/types.ts
+++ b/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 {