efim/some-automoderation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: separate 'speaker controls'

Browse Source 
specifically for 'i have finished speaking' and not allowing to change
the state
This commit is contained in:
efim
2023-11-25 08:42:13 +00:00
parent 1b91b9f083
commit 85b3a3f89e
4 changed files with 111 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
routes/templates/room.gohtml
View File

@@ -26,54 +26,71 @@
</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"
<script src="/static/dist/ext/sse.js"></script>
<main class="h-screen w-full flex flex-row"
hx-ext="sse"
sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
>
{{ 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>
{{ template "roomPeople" . }}
</div>
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="roomTableUpdate">
<div>
{{ template "roomPeople" . }}
</div>
{{ end }}
</div>
{{/* This is personal hand controls */}}
<div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
{{ block "controls" .Gestures }}
{{ range . }}
{{ end }}
</section>
{{/* This is personal hand controls */}}
{{ 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 */}}
<button
{{ if not .IsSelected }}
hx-get="{{ .Url }}"
class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ else }}
hx-get="/rooms/releaseHand"
class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ end }}
hx-target="#controls"
style="--color: var({{.Gesture.GetGestureInfo.Color}});
--color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
">
<img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
class="h-full"
/>
<p class="px-5 text-l">{{ .Gesture.String }} </p>
</button>
{{/* expects routes.GestureData */}}
<button
{{ if not .IsSelected }}
hx-get="{{ .Url }}"
class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ else }}
hx-get="/rooms/releaseHand"
class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ end }}
hx-target="#controls"
style="--color: var({{.Gesture.GetGestureInfo.Color}});
--color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
">
<img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
class="h-full"
/>
<p class="px-5 text-l">{{ .Gesture.String }} </p>
</button>
{{ end }}
{{ end }}
</div>
</div>
{{ 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 }}
</main>
{{ end }}
</body>