Merge pull request #4491 from traPtitech/feat/qall_UI

Feat/qall UI

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue

@@ -48,6 +48,13 @@
       @click="openChannelManageModal"
       @click-item="emit('clickItem')"
     />
+    <header-tools-menu-item
+      icon-name="phone-outline"
+      icon-mdi
+      label="ウェビナーモードでQallを開始"
+      @click="() => joinQall(props.channelId, true)"
+      @click-item="emit('clickItem')"
+    />
   </primary-view-header-popup-frame>
 </template>
 

src/components/Main/MainView/ChannelView/ChannelView.vue

@@ -4,7 +4,8 @@
       <channel-header :channel-id="channelId" />
     </template>
     <template #default>
-      <QallView v-if="callingChannel === channelId" />
+      <QallAudio />
+      <QallView v-if="getQallingState(channelId) === 'mainView'" />
       <channel-view-content
         v-else
         :channel-id="channelId"
@@ -15,6 +16,7 @@
     </template>
     <template #sidebar>
       <channel-sidebar
+        v-if="getQallingState(channelId) !== 'mainView'"
         :channel-id="channelId"
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
@@ -35,6 +37,7 @@ import usePinnedMessages from '/@/composables/message/usePinnedMessages'
 import useCurrentViewers from '/@/composables/useCurrentViewers'
 import { useQall } from '/@/composables/qall/useQall'
 import QallView from '../QallView/QallView.vue'
+import QallAudio from '../QallView/QallAudio.vue'
 
 const props = defineProps<{
   isReady: boolean
@@ -45,5 +48,5 @@ const props = defineProps<{
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
 const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
-const { callingChannel } = useQall()
+const { getQallingState } = useQall()
 </script>

src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts

@@ -0,0 +1,71 @@
+import { computed, ref, type ShallowRef } from 'vue'
+import useChannelMessageFetcher from './useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useSubscriptionStore } from '/@/store/domain/subscription'
+export const useChannelView = ({
+  channelId,
+  entryMessageId,
+  scrollerEle
+}: {
+  channelId: string
+  entryMessageId?: string
+  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+}) => {
+  const isMessageShow = ref(false)
+
+  const {
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest
+  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+
+  const { channelsMap } = useChannelsStore()
+  const isArchived = computed(
+    () => channelsMap.value.get(channelId)?.archived ?? false
+  )
+
+  const { unreadChannelsMap } = useSubscriptionStore()
+  const resetIsReachedLatest = () => {
+    if (!unreadChannelsMap.value.get(channelId)) return
+    isReachedLatest.value = false
+  }
+
+  const showToNewMessageButton = ref(false)
+  const toNewMessage = (behavior?: ScrollBehavior) => {
+    if (!scrollerEle.value) return
+    showToNewMessageButton.value = false
+    scrollerEle.value.$el.scrollTo({
+      top: scrollerEle.value.$el.scrollHeight,
+      behavior: behavior
+    })
+  }
+
+  const handleScroll = () => {
+    if (scrollerEle.value === undefined || isLoading.value) return
+    const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+    showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
+    if (!isReachedLatest.value) {
+      showToNewMessageButton.value = true
+    }
+  }
+
+  return {
+    isMessageShow,
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest,
+    isArchived,
+    resetIsReachedLatest,
+    showToNewMessageButton,
+    toNewMessage,
+    handleScroll
+  }
+}

src/components/Main/MainView/MessageInput/MessageInput.vue

@@ -2,7 +2,7 @@
   <div
     ref="containerEle"
     :class="$style.container"
-    :data-is-mobile="$boolAttr(isMobile)"
+    :data-is-mobile="$boolAttr(forceMobileStyle || isMobile)"
   >
     <button
       v-if="showToNewMessageButton"
@@ -36,7 +36,9 @@
         v-model="state.text"
         :channel-id="channelId"
         :is-posting="isPosting"
-        :shrink-to-one-line="isMobile && isLeftControlsExpanded"
+        :shrink-to-one-line="
+          (forceMobileStyle || isMobile) && isLeftControlsExpanded
+        "
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -85,6 +87,7 @@ const props = defineProps<{
   channelId: ChannelId | DMChannelId
   typingUsers: UserId[]
   showToNewMessageButton: boolean
+  forceMobileStyle?: boolean
 }>()
 const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void

src/components/Main/MainView/QallView/AudioComponent.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
 import AudioTrack from './AudioTrack.vue'
 import { useUserVolume } from '/@/store/app/userVolume'
-const { trackInfo, isLarge } = defineProps<{
+import UserCard from './UserCard.vue'
+const { trackInfo, isShow } = defineProps<{
   trackInfo: TrackInfo
-  isLarge: boolean
+  isShow?: boolean
 }>()
 const { getStore, setStore, restoringPromise } = useUserVolume()
-const volume = ref<number | string>(getStore(trackInfo.username) ?? 1)
+const volume = computed<number | string>(
+  () => getStore(trackInfo.username) ?? 1
+)
 
 const { findUserByName } = useUsersStore()
 const user = computed(() => findUserByName(trackInfo.username))
@@ -23,114 +26,17 @@ const parseToFloat = (value: number | string): number => {
   }
   return parseFloat(value)
 }
-
-watch(
-  () => volume.value,
-  v => {
-    setStore(trackInfo.username, parseToFloat(v))
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => getStore(trackInfo.username),
-  v => {
-    if (v) {
-      volume.value = v
-    }
-  },
-  { deep: true }
-)
 </script>
 
 <template>
-  <div>
-    <div :class="isLarge ? $style.LargeCard : $style.UserCard">
-      <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
-
-      <div :class="$style.OuterIcon">
-        <img :src="iconImage" :class="$style.OuterImage" />
-      </div>
-      <div :class="isLarge ? $style.LargeInnerIcon : $style.InnerIcon">
-        <img :src="iconImage" :class="$style.InnerImage" />
-      </div>
-
-      <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
-    </div>
-    <input v-model="volume" type="range" min="0" max="3" step="0.01" />
+  <div :class="isShow ? $style.container : []">
+    <UserCard :track-info="trackInfo" />
+    <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
   </div>
 </template>
 <style lang="scss" module>
-.UserCard {
-  height: 108px;
-  width: 192px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-}
-.LargeCard {
-  height: 324px;
-  width: 576px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-}
-.InnerIcon {
-  height: 64px;
-  width: 64px;
-  background-size: cover;
-  border-radius: 50%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.LargeInnerIcon {
-  height: 192px;
-  width: 192px;
-  background-size: cover;
-  border-radius: 50%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.OuterIcon {
-  height: 100%;
+.container {
   width: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  overflow: hidden;
-  filter: blur(40px);
-}
-.NameLabel {
-  position: absolute;
-  left: 8px;
-  bottom: 8px;
-  display: flex;
-  padding: 4px 12px;
-  align-items: flex-start;
-  gap: 8px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-}
-.OuterImage {
   height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-.InnerImage {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  border-radius: 50%;
 }
 </style>

src/components/Main/MainView/QallView/AudioTrack.vue

@@ -34,9 +34,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  audioContext.close()
   if (audioElement.value) {
     trackInfo.trackPublication?.track?.detach(audioElement.value)
-    audioContext.close()
   }
 })
 </script>

src/components/Main/MainView/QallView/CallControlButtonSmall.vue

@@ -43,19 +43,19 @@ function handleClick() {
 .callControlBtnSmall {
   width: 48px;
   height: 48px;
-  background-color: #222325;
   border: none;
   cursor: pointer;
   padding: 0;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s;
-  color: white;
+  @include background-tertiary;
+  @include color-ui-primary;
 }
 
 .callControlBtnSmall:hover {
-  opacity: 0.1;
+  opacity: 0.5;
 }
 
 .icon {