From 52c7587ce491178c4b0ed1c82b4fc8bfbd98758a Mon Sep 17 00:00:00 2001
From: Namekuji <nmkj@mx.a-ef.org>
Date: Thu, 8 Dec 2022 19:21:17 -0500
Subject: [PATCH] add features of mute, disconnect, and close

---
 audon-fe/src/components/Participant.vue |  23 ++-
 audon-fe/src/main.js                    |   8 +-
 audon-fe/src/stores/mastodon.js         |   6 +-
 audon-fe/src/views/HomeView.vue         |  42 +++++-
 audon-fe/src/views/RoomView.vue         | 192 ++++++++++++++++++++++--
 oauth.go                                |  27 +++-
 room.go                                 |  12 +-
 schema.go                               |   6 +
 server.go                               |   1 +
 9 files changed, 283 insertions(+), 34 deletions(-)

diff --git a/audon-fe/src/components/Participant.vue b/audon-fe/src/components/Participant.vue
index 8ca0442..cc9d974 100644
--- a/audon-fe/src/components/Participant.vue
+++ b/audon-fe/src/components/Participant.vue
@@ -1,9 +1,17 @@
 <script>
+import { mdiMicrophone, mdiMicrophoneOff } from "@mdi/js";
 export default {
   props: {
     talking: Boolean,
     type: String,
     data: Object,
+    muted: Boolean,
+  },
+  data () {
+    return {
+      mdiMicrophone,
+      mdiMicrophoneOff
+    }
   },
   computed: {
     isHostOrCohost() {
@@ -44,10 +52,17 @@ export default {
         <v-img :src="data?.avatar"></v-img>
       </v-avatar>
     </v-badge>
-    <v-avatar v-else :class="{ rounded: true, talk: talking, 'mt-2': true }" size="70">
+    <v-avatar
+      v-else
+      :class="{ rounded: true, talk: talking, 'mt-2': true }"
+      size="70"
+    >
       <v-img :src="data?.avatar"></v-img>
     </v-avatar>
-    <h4 :class="isHostOrCohost ? 'mt-1' : 'mt-2'">{{ data?.displayName }}</h4>
+    <h4 :class="isHostOrCohost ? 'mt-1' : 'mt-2'">
+      <v-icon v-if="isHostOrCohost" :icon="muted ? mdiMicrophoneOff : mdiMicrophone"></v-icon>
+      <a :href="data?.url" target="_blank">{{ data?.displayName }}</a>
+    </h4>
   </v-col>
 </template>
 
@@ -55,4 +70,8 @@ export default {
 .talk {
   outline: 3px solid cornflowerblue;
 }
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
 </style>
diff --git a/audon-fe/src/main.js b/audon-fe/src/main.js
index 4671dc7..6b2d2a3 100644
--- a/audon-fe/src/main.js
+++ b/audon-fe/src/main.js
@@ -39,20 +39,22 @@ axios.interceptors.response.use(undefined, (error) => {
 });
 router.beforeEach(async (to) => {
   const donStore = useMastodonStore();
-  if (!to.meta.noauth && !donStore.authorized) {
+  if ((!to.meta.noauth || to.name === "login") && !donStore.authorized) {
     try {
-      await donStore.fetchToken();
+      if (!donStore.client) await donStore.fetchToken();
     } catch (error) {
       if (error.response?.status === 401) {
         donStore.$reset();
       }
     }
   }
-})
+});
 router.afterEach((to) => {
   const donStore = useMastodonStore();
   if (!to.meta.noauth && !donStore.authorized) {
     router.push({ name: "login" }); // need to push in afterEach to get nonempty lastPath in LoginView.vue
+  } else if (to.name === "login" && donStore.authorized) {
+    router.replace({ name: "home" });
   }
 });
 
diff --git a/audon-fe/src/stores/mastodon.js b/audon-fe/src/stores/mastodon.js
index e7e2c28..8e526db 100644
--- a/audon-fe/src/stores/mastodon.js
+++ b/audon-fe/src/stores/mastodon.js
@@ -8,7 +8,11 @@ export const useMastodonStore = defineStore("mastodon", {
   state() {
     return {
       authorized: false,
-      oauth: null,
+      oauth: {
+        url: "",
+        token: "",
+        audon_id: "",
+      },
       client: null,
       userinfo: null,
     };
diff --git a/audon-fe/src/views/HomeView.vue b/audon-fe/src/views/HomeView.vue
index 384a506..1438509 100644
--- a/audon-fe/src/views/HomeView.vue
+++ b/audon-fe/src/views/HomeView.vue
@@ -1,6 +1,7 @@
 <script>
-import { RouterLink } from "vue-router";
 import { useMastodonStore } from "../stores/mastodon";
+import { mdiLogout } from "@mdi/js";
+import axios from "axios";
 
 export default {
   setup() {
@@ -10,15 +11,44 @@ export default {
   },
   data() {
     return {
-      query: ""
-    }
-  }
+      mdiLogout,
+      query: "",
+    };
+  },
+  methods: {
+    async onLogout() {
+      if (!confirm("Audon からログアウトしますか？")) return;
+
+      try {
+        const resp = await axios.post("/app/logout");
+        if (resp.status === 200) {
+          this.donStore.$reset();
+          this.$router.push({ name: "login" });
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.donStore.$reset();
+        this.$router.push({ name: "login" });
+      }
+    },
+  },
 };
 </script>
 
 <template>
   <main>
-    <div class="text-center my-10" >
+    <div class="text-right">
+      <v-btn
+        :append-icon="mdiLogout"
+        variant="outlined"
+        color="red"
+        @click="onLogout"
+      >
+        ログアウト
+      </v-btn>
+    </div>
+    <div class="text-center my-10">
       <v-avatar class="rounded" size="100">
         <v-img
           :src="donStore.userinfo?.avatar"
@@ -38,7 +68,7 @@ export default {
         <v-text-field v-mode="query"></v-text-field>
       </v-col> -->
       <v-col cols="12">
-        <v-btn block :to="{name: 'create'}" color="indigo">部屋を作成</v-btn>
+        <v-btn block :to="{ name: 'create' }" color="indigo">部屋を作成</v-btn>
       </v-col>
     </v-row>
   </main>
diff --git a/audon-fe/src/views/RoomView.vue b/audon-fe/src/views/RoomView.vue
index 2bda554..7308281 100644
--- a/audon-fe/src/views/RoomView.vue
+++ b/audon-fe/src/views/RoomView.vue
@@ -9,8 +9,15 @@ import {
   mdiMicrophoneOff,
   mdiPhoneRemove,
   mdiMicrophoneQuestion,
+  mdiDoorClosed,
+  mdiVolumeOff
 } from "@mdi/js";
-import { Room, RoomEvent, Track } from "livekit-client";
+import {
+  Room,
+  RoomEvent,
+  Track,
+  DisconnectReason,
+} from "livekit-client";
 import { login } from "masto";
 
 export default {
@@ -28,10 +35,12 @@ export default {
       mdiMicrophoneOff,
       mdiPhoneRemove,
       mdiMicrophoneQuestion,
+      mdiDoorClosed,
+      mdiVolumeOff,
       roomID: this.$route.params.id,
       loading: false,
       mainHeight: 600,
-      roomClient: null,
+      roomClient: new Room(),
       roomInfo: {
         title: "",
         description: "",
@@ -42,6 +51,9 @@ export default {
       participants: {},
       cachedMastoData: {},
       activeSpeakerIDs: new Set(),
+      mutedSpeakerIDs: new Set(),
+      micGranted: false,
+      autoplayDisabled: false,
     };
   },
   created() {
@@ -59,8 +71,40 @@ export default {
   mounted() {
     this.onResize();
   },
+  computed: {
+    iamMuted() {
+      const myAudonID = this.donStore.oauth.audon_id;
+      return (
+        (this.iamHost || this.iamCohost) &&
+        this.micGranted &&
+        this.mutedSpeakerIDs.has(myAudonID)
+      );
+    },
+    iamHost() {
+      const myAudonID = this.donStore.oauth.audon_id;
+      if (!myAudonID) return false;
+
+      return this.isHost(myAudonID);
+    },
+    iamCohost() {
+      const myInfo = this.donStore.userinfo;
+      if (!myInfo) return false;
+
+      return this.isCohost({remote_id: myInfo.id , remote_url: myInfo.url});
+    },
+    micStatusIcon() {
+      if (!this.micGranted) {
+        return mdiMicrophoneQuestion;
+      }
+      if (this.iamMuted) {
+        return mdiMicrophoneOff;
+      }
+      return mdiMicrophone;
+    },
+  },
   methods: {
     async joinRoom() {
+      if (!this.donStore.authorized) return;
       this.loading = true;
       try {
         const resp = await axios.get(`/api/room/${this.roomID}`);
@@ -86,6 +130,10 @@ export default {
               track.detach();
             }
           )
+          .on(RoomEvent.LocalTrackPublished, (publication, participant) => {
+            self.micGranted = true;
+            self.mutedSpeakerIDs.delete(participant.identity);
+          })
           .on(RoomEvent.LocalTrackUnpublished, (publication, participant) => {
             publication.track?.detach();
           })
@@ -98,17 +146,42 @@ export default {
               self.fetchMastoData(participant.identity, metadata);
             }
           })
+          .on(RoomEvent.TrackMuted, (publication, participant) => {
+            self.mutedSpeakerIDs.add(participant.identity);
+          })
+          .on(RoomEvent.TrackUnmuted, (publication, participant) => {
+            self.mutedSpeakerIDs.delete(participant.identity);
+          })
           .on(RoomEvent.ParticipantDisconnected, (participant) => {
             self.participants = omit(self.participants, participant.identity);
+            self.mutedSpeakerIDs.delete(participant.identity);
           })
           .on(RoomEvent.AudioPlaybackStatusChanged, () => {
             if (!room.canPlaybackAudio) {
               // FIXME: popup a dialog to ask user to allow audio playback
-              console.log("needs audio playback permission");
+              // alert("autoplay not permitted");
+              self.autoplayDisabled = true
             }
           })
           .on(RoomEvent.Disconnected, (reason) => {
-            console.log("disconnected: ", reason);
+            // TODO: change this from alert to a vuetify thing
+            let message = "";
+            switch (reason) {
+              case DisconnectReason.ROOM_DELETED:
+                message = "ホストにより部屋が閉じられました。";
+                break;
+              case DisconnectReason.PARTICIPANT_REMOVED:
+                message = "部屋から退去しました";
+                break;
+              case DisconnectReason.CLIENT_INITIATED:
+                break;
+              default:
+                message = "Disconnected due to unknown reasons";
+            }
+            if (message !== "") {
+              alert(message);
+            }
+            self.$router.push({ name: "home" });
           });
         await room.connect(resp.data.url, resp.data.token);
         this.roomClient = room;
@@ -126,11 +199,25 @@ export default {
             this.fetchMastoData(key, value);
           }
         }
+        if (this.iamHost || this.iamCohost) {
+          try {
+            await room.localParticipant.setMicrophoneEnabled(true);
+          } catch {
+            alert("ブラウザが録音を許可していません");
+          }
+        }
       } catch (error) {
         if (error.response?.status === 404) {
           pushNotFound(this.$route);
+        } else if (error.response?.status === 406) {
+          alert(
+            "他のデバイスで入室済みです。切断された場合はしばらく待ってからやり直してください。"
+          );
+          this.$router.push({ name: "home" });
         } else {
-          console.log(error);
+          // FIXME: error handling
+          alert(error);
+          this.$router.push({ name: "home" });
         }
       } finally {
         this.loading = false;
@@ -141,6 +228,9 @@ export default {
       const height = mainArea.clientHeight;
       this.mainHeight = height > 700 ? 700 : window.innerHeight - 70;
     },
+    isHost(identity) {
+      return identity === this.roomInfo.host?.audon_id;
+    },
     isCohost(value) {
       return (
         value &&
@@ -154,7 +244,16 @@ export default {
       const metadata = participant.metadata
         ? JSON.parse(participant.metadata)
         : null;
-      this.participants[participant.identity] = metadata;
+      if (metadata) {
+        this.participants[participant.identity] = metadata;
+        const track = participant.getTrack(Track.Source.Microphone);
+        if (
+          (this.isHost(participant.identity) || this.isCohost(metadata)) &&
+          track?.isMuted
+        ) {
+          this.mutedSpeakerIDs.add(participant.identity);
+        }
+      }
       return metadata;
     },
     async fetchMastoData(identity, { remote_id, remote_url }) {
@@ -172,15 +271,78 @@ export default {
         console.log(error);
       }
     },
+    async onToggleMute() {
+      const myTrack = this.roomClient.localParticipant.getTrack(
+        Track.Source.Microphone
+      );
+      if (this.iamHost || this.iamCohost) {
+        try {
+          if (!this.micGranted) {
+            await this.roomClient.localParticipant.setMicrophoneEnabled(true);
+          } else if (myTrack) {
+            await this.roomClient.localParticipant.setMicrophoneEnabled(
+              myTrack.isMuted
+            );
+          }
+        } catch {
+          alert("ブラウザが録音を許可していません");
+        }
+      } else {
+        alert("リクエストはアップデートで実装予定です！");
+      }
+    },
+    async onRoomClose() {
+      // TODO: change this from confirm to a vuetify thing
+      if (confirm("この部屋を閉じますか？")) {
+        try {
+          await axios.delete(`/api/room/${this.roomID}`);
+        } catch (error) {
+          alert(error);
+        }
+      }
+    },
+    async onStartListening() {
+      try {
+        await this.roomClient.startAudio();
+        this.autoplayDisabled = false;
+      } catch {
+        alert("接続できませんでした。退室します。");
+        await this.roomClient.disconnect();
+      }
+    }
   },
 };
 </script>
 
 <template>
+  <v-dialog v-model="autoplayDisabled" max-width="500" persistent>
+    <v-alert color="indigo">
+      <div class="mb-5">ブラウザの設定により無音になっています。続行するには「視聴を始める」ボタンを押してください。</div>
+      <div class="text-center mb-3">
+        <v-btn color="gray" @click="onStartListening">視聴を始める</v-btn>
+      </div>
+      <div class="text-center">
+        <v-btn variant="text" @click="roomClient.disconnect()">退室する</v-btn>
+      </div>
+    </v-alert>
+  </v-dialog>
   <div class="d-none" ref="audioDOM"></div>
   <main class="fill-height" v-resize="onResize">
     <v-card :height="mainHeight" :loading="loading" class="d-flex flex-column">
-      <v-card-title>{{ roomInfo.title }}</v-card-title>
+      <v-card-title class="d-flex justify-space-between">
+        <div>{{ roomInfo.title }}</div>
+        <div>
+          <v-btn
+            v-if="iamHost"
+            :append-icon="mdiDoorClosed"
+            variant="outlined"
+            color="red"
+            @click="onRoomClose"
+          >
+            閉室
+          </v-btn>
+        </div>
+      </v-card-title>
       <div
         class="overflow-auto flex-shrink-0 pb-2"
         v-if="roomInfo.description"
@@ -195,23 +357,25 @@ export default {
         <v-row justify="start">
           <template v-for="(value, key) of participants" :key="key">
             <Participant
-              v-if="key === roomInfo.host?.audon_id"
+              v-if="isHost(key)"
               :talking="activeSpeakerIDs.has(key)"
               type="host"
               :data="cachedMastoData[key]"
+              :muted="mutedSpeakerIDs.has(key)"
             ></Participant>
             <Participant
               v-if="isCohost(value)"
               :talking="activeSpeakerIDs.has(key)"
               type="cohost"
               :data="cachedMastoData[key]"
+              :muted="mutedSpeakerIDs.has(key)"
             ></Participant>
           </template>
         </v-row>
         <v-row>
           <template v-for="(value, key) of participants" :key="key">
             <Participant
-              v-if="key !== roomInfo.host?.audon_id && !isCohost(value)"
+              v-if="!isHost(key) && !isCohost(value)"
               :talking="activeSpeakerIDs.has(key)"
               :data="cachedMastoData[key]"
             ></Participant>
@@ -221,11 +385,17 @@ export default {
       <v-divider></v-divider>
       <v-card-actions class="justify-center" style="gap: 50px">
         <v-btn
-          :icon="mdiMicrophoneQuestion"
+          :icon="micStatusIcon"
           color="white"
           variant="flat"
+          @click="onToggleMute"
+        ></v-btn>
+        <v-btn
+          :icon="mdiPhoneRemove"
+          color="red"
+          @click="roomClient.disconnect()"
+          variant="flat"
         ></v-btn>
-        <v-btn :icon="mdiPhoneRemove" color="red" variant="flat"></v-btn>
       </v-card-actions>
     </v-card>
   </main>
diff --git a/oauth.go b/oauth.go
index 4fbddc6..59136e3 100644
--- a/oauth.go
+++ b/oauth.go
@@ -173,11 +173,34 @@ func getOAuthTokenHandler(c echo.Context) (err error) {
 	}
 
 	return c.JSON(http.StatusOK, &TokenResponse{
-		Url:   data.MastodonConfig.Server,
-		Token: data.MastodonConfig.AccessToken,
+		Url:     data.MastodonConfig.Server,
+		Token:   data.MastodonConfig.AccessToken,
+		AudonID: data.AudonID,
 	})
 }
 
+func logoutHandler(c echo.Context) (err error) {
+	data, err := getSessionData(c)
+	if err == nil && data.AudonID != "" {
+		mastoURL, err := url.Parse(data.MastodonConfig.Server)
+		if err != nil {
+			return ErrInvalidRequestFormat
+		}
+		mastoURL = mastoURL.JoinPath("oauth", "revoke")
+		formValues := url.Values{}
+		formValues.Add("client_id", data.MastodonConfig.ClientID)
+		formValues.Add("client_secret", data.MastodonConfig.ClientSecret)
+		formValues.Add("token", data.MastodonConfig.AccessToken)
+		resp, err := http.PostForm(mastoURL.String(), formValues)
+		if err == nil && resp.StatusCode == http.StatusOK {
+			return c.NoContent(http.StatusOK)
+		}
+		return echo.NewHTTPError(http.StatusBadRequest)
+	}
+
+	return echo.NewHTTPError(http.StatusUnauthorized, "login_required")
+}
+
 func authMiddleware(next echo.HandlerFunc) echo.HandlerFunc {
 	return func(c echo.Context) error {
 		data, err := getSessionData(c)
diff --git a/room.go b/room.go
index 28559b8..e70c85b 100644
--- a/room.go
+++ b/room.go
@@ -15,13 +15,6 @@ import (
 	"go.mongodb.org/mongo-driver/mongo"
 )
 
-type (
-	TokenResponse struct {
-		Url   string `json:"url"`
-		Token string `json:"token"`
-	}
-)
-
 // handler for POST to /api/room
 func createRoomHandler(c echo.Context) error {
 	room := new(Room)
@@ -143,8 +136,9 @@ func joinRoomHandler(c echo.Context) (err error) {
 	}
 
 	resp := &TokenResponse{
-		Url:   mainConfig.Livekit.URL.String(),
-		Token: token,
+		Url:     mainConfig.Livekit.URL.String(),
+		Token:   token,
+		AudonID: user.AudonID,
 	}
 
 	// Create room in LiveKit if it doesn't exist
diff --git a/schema.go b/schema.go
index f7a003c..f0cc662 100644
--- a/schema.go
+++ b/schema.go
@@ -39,6 +39,12 @@ type (
 		EndedAt       time.Time    `bson:"ended_at" json:"ended_at"`
 		CreatedAt     time.Time    `bson:"created_at" json:"created_at"`
 	}
+
+	TokenResponse struct {
+		Url     string `json:"url"`
+		Token   string `json:"token"`
+		AudonID string `json:"audon_id"`
+	}
 )
 
 const (
diff --git a/server.go b/server.go
index 7389f0a..61ca6bb 100644
--- a/server.go
+++ b/server.go
@@ -123,6 +123,7 @@ func main() {
 	e.POST("/app/login", loginHandler)
 	e.GET("/app/oauth", oauthHandler)
 	e.GET("/app/verify", verifyHandler)
+	e.POST("/app/logout", logoutHandler)
 
 	e.POST("/app/webhook", livekitWebhookHandler)