Merge pull request #4497 from traPtitech/feat/qall_noise

Feat/qall noise

src/assets/mdi.ts

@@ -39,6 +39,8 @@ import {
   mdiToggleSwitchOff,
   mdiToggleSwitch,
   mdiChevronDoubleLeft,
+  mdiChevronDoubleUp,
+  mdiChevronDoubleDown,
   mdiChevronLeft,
   mdiChevronRight,
   mdiBookmark,
@@ -86,7 +88,8 @@ import {
   mdiDelete,
   mdiVideo,
   mdiVideoOff,
-  mdiCommentTextMultipleOutline
+  mdiCommentTextMultipleOutline,
+  mdiCommentOffOutline
 } from '@mdi/js'
 
 interface MdiIconsMapping {
@@ -137,6 +140,8 @@ const mdi: MdiIconsMapping = {
   'toggle-switch-off': mdiToggleSwitchOff,
   'toggle-switch-on': mdiToggleSwitch,
   'chevron-double': mdiChevronDoubleLeft,
+  'chevron-double-up': mdiChevronDoubleUp,
+  'chevron-double-down': mdiChevronDoubleDown,
   'chevron-left': mdiChevronLeft,
   'chevron-right': mdiChevronRight,
   'chevron-up': mdiChevronUp,
@@ -181,7 +186,8 @@ const mdi: MdiIconsMapping = {
   delete: mdiDelete,
   video: mdiVideo,
   'video-off': mdiVideoOff,
-  'comment-outline': mdiCommentTextMultipleOutline
+  'comment-outline': mdiCommentTextMultipleOutline,
+  'comment-off-outline': mdiCommentOffOutline
 }
 
 export default mdi

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

@@ -79,9 +79,7 @@ const handleApply = () => {
           <button :class="$style.cancelButton" @click="onClose">
             キャンセル
           </button>
-          <button :class="$style.applyButton" @click="handleApply">
-            適用
-          </button>
+          <button :class="$style.applyButton" @click="handleApply">適用</button>
         </div>
       </div>
     </div>
@@ -161,7 +159,7 @@ const handleApply = () => {
   background-color: transparent;
   border: 1px solid $theme-ui-secondary;
   color: $theme-ui-secondary;
-  
+
   &:hover {
     background-color: rgba($theme-ui-secondary, 0.1);
   }
@@ -170,7 +168,7 @@ const handleApply = () => {
 .applyButton {
   background-color: $theme-accent-primary;
   color: white;
-  
+
   &:hover {
     background-color: darken($theme-accent-primary, 5%);
   }

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

@@ -51,5 +51,6 @@ const startAnimation = () => {
   font-size: 32px;
   color: black;
   text-shadow: 1px 1px 2px white;
+  z-index: 301;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue'
+import { nextTick, ref, useTemplateRef } from 'vue'
 import DanmakuComment from './DanmakuComment.vue'
 import DanmakuStamp from './DanmakuStamp.vue'
 
@@ -57,37 +57,21 @@ messageMitt.on('updateMessage', async message => {
 })
 
 useMittListener(qallMitt, 'pushStamp', stamp => {
-  sparkle(stamp)
+  stamps.value.push({
+    id: Math.random().toString(36).substring(2, 15),
+    stampId: stamp
+  })
+  setTimeout(() => {
+    stamps.value.shift()
+  }, 1400)
+
+  //TODO: 出現ロジックを考える
+  if (Math.random() < 0.005) {
+    sparkle(stamp)
+  }
 })
 
 const { sparkle } = useDanmakuSparkle(showSparkle)
-
-onMounted(() => {
-  // 一定間隔でコメントを生成
-  setInterval(() => {
-    comments.value.push({
-      id: Math.random().toString(36).substring(2, 15),
-      markdown: 'うおおおおおおおおおお!:tada::tada.party::tada.parrot:'
-    })
-    setTimeout(() => {
-      comments.value.shift()
-    }, 6000)
-  }, 1000)
-
-  setInterval(() => {
-    stamps.value.push({
-      id: Math.random().toString(36).substring(2, 15),
-      stampId: '69c10725-2176-45ac-a4a5-22e70b8a76f7'
-    })
-    setTimeout(() => {
-      stamps.value.shift()
-    }, 1400)
-  }, 1000)
-
-  setInterval(() => {
-    sparkle('e0e0c3a6-c544-4c96-8529-d597563fd1ad')
-  }, 5000)
-})
 </script>
 
 <template>

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

@@ -57,5 +57,6 @@ onMounted(() => startAnimation())
   font-size: 32px;
   color: black;
   text-shadow: 1px 1px 2px white;
+  z-index: 300;
 }
 </style>

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

@@ -8,6 +8,7 @@ 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 IconButton from '/@/components/UI/IconButton.vue'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -56,60 +57,73 @@ 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>
   <div
     :class="$style.container"
     :data-is-not-messages-show="$boolAttr(!isMessageShow)"
   >
-    <div :class="$style.mainViewConteiner">
-      <div :class="$style.messageContainer">
+    <div :class="$style.mainViewContainer">
+      <div
+        :class="$style.messageContainer"
+        :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+      >
         <scroll-loading-bar
           :class="$style.loadingBar"
           :show="isLoading && isMessageShow"
         />
         <transition name="fade-bottom" mode="out-in">
-          <messages-scroller
+          <div
             v-if="isMessageShow"
-            ref="scrollerEle"
-            :message-ids="messageIds"
-            :is-reached-end="isReachedEnd"
-            :is-reached-latest="isReachedLatest"
-            :is-loading="isLoading"
-            :last-loading-direction="lastLoadingDirection"
-            @request-load-former="onLoadFormerMessagesRequest"
-            @request-load-latter="onLoadLatterMessagesRequest"
-            @scroll-passive="handleScroll"
-            @reset-is-reached-latest="resetIsReachedLatest"
+            :class="$style.messageContainerBackgroundContainer"
           >
-            <template
-              #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
+            <div :class="$style.messageContainerBackground"></div>
+
+            <messages-scroller
+              v-if="isMessageShow"
+              ref="scrollerEle"
+              :message-ids="messageIds"
+              :is-reached-end="isReachedEnd"
+              :is-reached-latest="isReachedLatest"
+              :is-loading="isLoading"
+              :last-loading-direction="lastLoadingDirection"
+              @request-load-former="onLoadFormerMessagesRequest"
+              @request-load-latter="onLoadLatterMessagesRequest"
+              @scroll-passive="handleScroll"
+              @reset-is-reached-latest="resetIsReachedLatest"
             >
-              <message-element
-                :class="$style.element"
-                :message-id="messageId"
-                :is-archived="isArchived"
-                @change-height="onChangeHeight"
-                @entry-message-loaded="onEntryMessageLoaded"
-              />
-            </template>
-          </messages-scroller>
+              <template
+                #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
+              >
+                <message-element
+                  :class="$style.element"
+                  :message-id="messageId"
+                  :is-archived="isArchived"
+                  @change-height="onChangeHeight"
+                  @entry-message-loaded="onEntryMessageLoaded"
+                />
+              </template>
+            </messages-scroller>
+          </div>
         </transition>
+        <div :class="[$style.uiElement, $style.uiToggleButton]">
+          <IconButton
+            :icon-name="`chevron-double-${isMessageShow ? 'down' : 'up'}`"
+            icon-mdi
+            @click="
+              () => {
+                if (isMessageShow) {
+                  isMessageShow = false
+                  toNewMessage('smooth')
+                } else {
+                  isMessageShow = true
+                  nextTick(() => toNewMessage())
+                }
+              }
+            "
+          />
+        </div>
       </div>
       <slot name="default"></slot>
     </div>
@@ -130,7 +144,7 @@ defineExpose({
   flex-direction: column;
 }
 
-.mainViewConteiner {
+.mainViewContainer {
   flex-grow: 1;
   position: relative;
 }
@@ -139,7 +153,8 @@ defineExpose({
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 30%;
+  width: 33%;
+  min-width: 25rem;
   height: 100%;
 
   display: flex;
@@ -149,13 +164,33 @@ defineExpose({
   &[data-is-not-messages-show] {
     pointer-events: none;
   }
+  z-index: 400;
+}
+
+.messageContainerBackgroundContainer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.messageContainerBackground {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+  backdrop-filter: blur(100px);
+
+  @include background-primary;
 }
 
 .loadingBar {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
   height: 12px;
   z-index: $z-index-message-loading;
 }
@@ -174,4 +209,14 @@ defineExpose({
 .uiElement {
   pointer-events: all;
 }
+
+.uiToggleButton {
+  @include color-ui-secondary;
+  @include background-primary;
+  padding: 0.5rem;
+  border-radius: 2rem;
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+}
 </style>

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

@@ -67,6 +67,7 @@ const toggleVideo = async () => {
       isCameraOn.value = false
     }
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('Failed to toggle video:', err)
   }
 }
@@ -89,6 +90,7 @@ const toggleScreen = async () => {
       isScreenSharing.value = false
     }
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('Failed to toggle screen sharing:', err)
   }
 }
@@ -175,23 +177,22 @@ const handleBackgroundSave = (data: {
 const showCameraDetailSetting = ref(false)
 const showShareScreenSettingDetail = ref(false)
 
-const childRef = ref<InstanceType<typeof QallMessageView> | null>(null)
-
-const showMessage = () => {
-  childRef.value?.handleMessage()
+const showDanmaku = ref(true)
+const toggleDanmaku = () => {
+  showDanmaku.value = !showDanmaku.value
 }
 </script>
 
 <template>
   <div :class="$style.Block">
-    <QallMessageView
-      ref="childRef"
-      :channel-id="callingChannel"
-      :typing-users="[]"
-    >
-      <DanmakuContainer />
+    <QallMessageView :channel-id="callingChannel" :typing-users="[]">
+      <DanmakuContainer v-if="showDanmaku" />
       <div :class="$style.iconContainer">
-        <IconButton icon-name="comment-outline" icon-mdi @click="showMessage" />
+        <IconButton
+          :icon-name="`comment${showDanmaku ? '' : '-off'}-outline`"
+          icon-mdi
+          @click="toggleDanmaku"
+        />
         <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
       </div>
       <div :class="$style.stackContainer">

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+import { ref } from 'vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import AudioTrack from './AudioTrack.vue'
 import VideoComponent from './VideoComponent.vue'