feat: separate 'speaker controls'

specifically for 'i have finished speaking' and not allowing to change
the state

routes/room_page.go

@@ -41,6 +41,8 @@ func registerPageRoutes(
 			http.StripPrefix(subscribeRoomPath, streamingRoomStates(templateFs, roomsM))))
 
 	http.HandleFunc("/rooms/preview-templates", roomTemplatesPreview(templateFs))
+
+	http.HandleFunc("/rooms/speakerControls", speakerControlsRoute(templateFs))
 }
 
 func streamingRoomStates(
@@ -77,7 +79,7 @@ func streamingRoomStates(
 		roomStream := roomsM.Subscribe(r.Context(), roomName)
 		for room := range roomStream {
 			// log.Printf("/rooms/streamingRoom iterating with %+v", room)
-			fmt.Fprint(w, "data: ")
+			fmt.Fprint(w, "event: roomTableUpdate\ndata: ")
 
 			var buffer bytes.Buffer
 
@@ -96,6 +98,11 @@ func streamingRoomStates(
 
 			fmt.Fprint(w, "\n\n")
 			w.(http.Flusher).Flush()
+			if session.PersonId == room.CurrentSpeaker {
+				log.Printf("/rooms/subscribe sending 'become-speaker' to %s", session.PersonId)
+				fmt.Fprint(w, "event: become-speaker\ndata:yo\n\n")
+				w.(http.Flusher).Flush()
+			}
 		}
 	}
 }
@@ -119,8 +126,10 @@ func raiseGestureHandRoute(
 			// TODO return error i guess
 			return
 		}
+		var room rooms.Room
 		err = roomsM.Update(r.Context(), session.RoomId, func(fromRoom rooms.Room) (toRoom rooms.Room) {
 			toRoom = fromRoom.RaiseHand(session.PersonId, selectedGesture)
+			room = toRoom
 			return toRoom
 		})
 		if err != nil {
@@ -132,6 +141,10 @@ func raiseGestureHandRoute(
 		tmpl := template.Must(
 			template.New("").ParseFS(templateFs, tableTemplates))
 
+		if session.PersonId == room.CurrentSpeaker {
+			tmpl.ExecuteTemplate(w, "speakerControls", nil)
+			return
+		} else {
 			var gesturesData []GestureData
 			for _, gesture := range rooms.GesturesHighToLow {
 				gesturesData = append(gesturesData, GestureData{
@@ -147,6 +160,7 @@ func raiseGestureHandRoute(
 				// TODO return error i guess
 			}
 		}
+	}
 }
 
 // TODO should return lowered control for passed hand gesture, i guess optional
@@ -192,7 +206,6 @@ func releaseHandRoute(
 	}
 }
 
-
 func roomPageRoute(
 	templateFs *embed.FS,
 	roomsM rooms.RoomManager,
@@ -269,6 +282,16 @@ func roomPageRoute(
 	}
 }
 
+func speakerControlsRoute(
+	templateFs *embed.FS,
+) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		templateFile := "templates/room.gohtml"
+		tmpl := template.Must(template.ParseFS(templateFs, templateFile))
+		tmpl.ExecuteTemplate(w, "speakerControls", nil)
+	}
+}
+
 type GestureData struct {
 	Url        string
 	Gesture    rooms.HandGesture

routes/room_page_templates_preview.go

@@ -57,6 +57,9 @@ func (r *roomTableData) Tangens() float64 {
 	}
 	return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m);
 }
+func (r *roomTableData) IsViewerTheSpeaker() bool {
+	return r.currentPerson == r.CurrentSpeaker
+}
 
 type arrowData struct {
 	IsVisible        bool

routes/static/out.css

@@ -734,6 +734,11 @@ video {
   background-color: hsl(var(--color) / 0.5);
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));

routes/templates/room.gohtml

@@ -26,29 +26,33 @@
       </p>
     <![endif]-->
     {{ define "main-content" }}
-    <main class="h-screen">
-      <div class="h-full w-full flex flex-row">
     <script src="/static/dist/ext/sse.js"></script>
-        {{/* This is dynamic table, updated from SSE */}}
-        <div
-          id="roomTextContainer"
-          class="grid place-content-center grow"
+    <main class="h-screen  w-full flex flex-row"
           hx-ext="sse"
-          sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
+          sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}">
+      {{/* This is dynamic table, updated from SSE */}}
+      <section
+        id="roomTable"
+        class="grid place-content-center grow"
       >
         {{ block "simpleRoomShow" .Room }}
         <!-- TODO use template, not block, have only 'loader' in base place -->
         <!-- use different template based on 'mobile' query param -->
-          <div sse-swap="message">
+        <div sse-swap="roomTableUpdate">
           <div>
             {{ template "roomPeople" . }}
           </div>
         </div>
         {{ end }}
-        </div>
+      </section>
       {{/* This is personal hand controls */}}
-        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
+      {{ if not .Room.IsViewerTheSpeaker }}
       {{ block "controls" .Gestures }}
+      <section id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5"
+               hx-trigger="sse:become-speaker"
+               hx-get="/rooms/speakerControls"
+               hx-swap="outerHTML"
+               >
         {{ range . }}
 
         {{/* expects routes.GestureData */}}
@@ -71,9 +75,22 @@
         </button>
 
         {{ end }}
+      </section>
+      {{ end }}
+      {{ else }}
+      {{ block "speakerControls" . }}
+      <section id="controls" class="bg-blue-100 flex flex-col p-10 gap-y-5"
+               hx-swap="outerHTML">
+        <button
+          hx-get="/rooms/releaseHand"
+          class="bg-white rounded border border-2 font-bold h-16 rounded-l-full flex flex-row items-center"
+          hx-target="#controls"
+          >
+          <p class="px-5 text-l">I have finished speaking</p>
+        </button>
+      </section>
+      {{ end }}
       {{ end }}
-        </div>
-      </div>
     </main>
     {{ end }}
   </body>