Merge pull request #4496 from traPtitech/feat/comment-btn

Feat/comment btn

src/assets/mdi.ts

@@ -85,7 +85,8 @@ import {
   mdiNotebook,
   mdiDelete,
   mdiVideo,
-  mdiVideoOff
+  mdiVideoOff,
+  mdiCommentTextMultipleOutline
 } from '@mdi/js'
 
 interface MdiIconsMapping {
@@ -179,7 +180,8 @@ const mdi: MdiIconsMapping = {
   'format-title': mdiFormatTitle,
   delete: mdiDelete,
   video: mdiVideo,
-  'video-off': mdiVideoOff
+  'video-off': mdiVideoOff,
+  'comment-outline': mdiCommentTextMultipleOutline
 }
 
 export default mdi

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

@@ -8,7 +8,6 @@ import useChannelMessageFetcher from '../ChannelView/ChannelViewContent/composab
 import { useChannelsStore } from '/@/store/entities/channels'
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
-import FormButton from '/@/components/UI/FormButton.vue'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -57,6 +56,20 @@ const handleScroll = () => {
     showToNewMessageButton.value = true
   }
 }
+
+const handleMessage = () => {
+  if (isMessageShow.value) {
+    isMessageShow.value = false
+    toNewMessage('smooth')
+  } else {
+    isMessageShow.value = true
+    nextTick(() => toNewMessage())
+  }
+}
+
+defineExpose({
+  handleMessage
+})
 </script>
 
 <template>
@@ -97,22 +110,6 @@ const handleScroll = () => {
             </template>
           </messages-scroller>
         </transition>
-        <div :class="$style.uiElement">
-          <FormButton
-            label="メッセージを表示"
-            @click="
-              () => {
-                if (isMessageShow) {
-                  isMessageShow = false
-                  toNewMessage('smooth')
-                } else {
-                  isMessageShow = true
-                  nextTick(() => toNewMessage())
-                }
-              }
-            "
-          />
-        </div>
       </div>
       <slot name="default"></slot>
     </div>

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

@@ -10,15 +10,12 @@ import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import ParticipantList from './ParticipantList.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import UserList from './UserList.vue'
-import { useModalStore } from '/@/store/ui/modal'
 import CameraDetailSetting from './CameraDetailSetting.vue'
 import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
 import DetailButton from './DetailButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
 import QallMessageView from './QallMessageView.vue'
 
-const { pushModal } = useModalStore()
-
 const {
   tracksMap,
   screenShareTracks,
@@ -177,23 +174,28 @@ const handleBackgroundSave = (data: {
 
 const showCameraDetailSetting = ref(false)
 const showShareScreenSettingDetail = ref(false)
+
+const childRef = ref<InstanceType<typeof QallMessageView> | null>(null)
+
+const showMessage = () => {
+  childRef.value?.handleMessage()
+}
 </script>
 
 <template>
   <div :class="$style.Block">
-    <QallMessageView :channel-id="callingChannel" :typing-users="[]">
+    <QallMessageView
+      ref="childRef"
+      :channel-id="callingChannel"
+      :typing-users="[]"
+    >
       <DanmakuContainer />
-      <IconButton
-        icon-name="close"
-        icon-mdi
-        :class="$style.closeButton"
-        @click="isSubView = true"
-      />
-
-      <!-- 縦並び用のラッパ -->
+      <div :class="$style.iconContainer">
+        <IconButton icon-name="comment-outline" icon-mdi @click="showMessage" />
+        <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
+      </div>
       <div :class="$style.stackContainer">
         <UserList :class="$style.userList" />
-
         <div :class="$style.controlBarContainer">
           <div :class="$style.controlBar">
             <div :class="$style.smallButtonGroup">
@@ -380,4 +382,12 @@ const showShareScreenSettingDetail = ref(false)
   top: 1rem;
   right: 1rem;
 }
+
+.iconContainer {
+  display: flex;
+  gap: 4px;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
 </style>