Merge pull request #4490 from traPtitech/fix/share-func

Fix/share func

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

@@ -9,7 +9,6 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'close'): void
   (
     e: 'save',
     data: {
@@ -18,6 +17,8 @@ const emit = defineEmits<{
       selectedVideoInput: MediaDeviceInfo
     }
   ): void
+  (e: 'add'): void
+  (e: 'close'): void
 }>()
 
 const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
@@ -51,11 +52,22 @@ const handleSave = () => {
       backgroundImage: backgroundImage.value,
       selectedVideoInput
     })
+    emit('close')
   } else {
     console.error('No video input device selected')
   }
 }
 
+const handleAddCameraTrack = () => {
+  addCameraTrack(
+    selectedVideoInput.value,
+    backgroundType.value,
+    backgroundImage.value
+  )
+  emit('add')
+  emit('close')
+}
+
 const handleClose = () => {
   emit('close')
 }
@@ -155,9 +167,7 @@ const handleClose = () => {
         <FormButton
           label="カメラを追加"
           type="tertiary"
-          @click="
-            addCameraTrack(selectedVideoInput, backgroundType, backgroundImage)
-          "
+          @click="handleAddCameraTrack"
         />
         <FormButton label="閉じる" type="secondary" @click="handleClose" />
       </div>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { defineProps, useCssModule, computed } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
+
+const props = defineProps({
+  onClick: {
+    type: Function,
+    required: true
+  },
+  inverted: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const style = useCssModule()
+
+function handleClick() {
+  props.onClick?.()
+}
+
+const iconClass = computed(() => ({
+  [style.inverted]: props.inverted
+}))
+
+const buttonClass = computed(() => ({
+  [style.detailButton]: true,
+  [style.invertedBackground]: props.inverted,
+  [style.normalBackground]: !props.inverted
+}))
+</script>
+
+<template>
+  <button :class="buttonClass" @click="handleClick">
+    <AIcon name="plus-circle" mdi :class="iconClass" :size="24" />
+  </button>
+</template>
+
+<style lang="scss" module>
+.detailButton {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.inverted {
+  filter: invert(1);
+}
+
+.invertedBackground {
+  background-color: white;
+  width: 24px;
+  height: 24px;
+}
+
+.normalBackground {
+  background-color: black;
+  width: 24px;
+  height: 24px;
+}
+</style>

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

@@ -11,7 +11,7 @@ import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import { useModalStore } from '/@/store/ui/modal'
 import CameraDetailSetting from './CameraDetailSetting.vue'
 import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
+import DetailButton from './DetailButton.vue'
 
 const { pushModal } = useModalStore()
 
@@ -176,10 +176,7 @@ const handleBackgroundSave = (data: {
   backgroundType.value = data.backgroundType
   backgroundImage.value = data.backgroundImage
   showCameraDetailSetting.value = false
-}
-
-const handleClose = () => {
-  showCameraDetailSetting.value = false
+  console.log(data.selectedVideoInput)
 }
 
 const showCameraDetailSetting = ref(false)
@@ -216,18 +213,23 @@ const showShareScreenSettingDetail = ref(false)
             :mdi="false"
             :inverted="isScreenSharing"
           />
-          <button
-            :class="$style.detailButton"
+          <DetailButton
             @click="
               () => {
                 showShareScreenSettingDetail = true
               }
             "
-          >
-            <AIcon name="plus-circle" mdi />
-          </button>
+          />
           <ScreenShareDetailSetting
             :open="showShareScreenSettingDetail"
+            @add="
+              () => {
+                isScreenSharing = true
+                screenShareIcon = isScreenSharing
+                  ? 'stop-screen-share'
+                  : 'screen-share'
+              }
+            "
             @close="
               () => {
                 showShareScreenSettingDetail = false
@@ -242,20 +244,24 @@ const showShareScreenSettingDetail = ref(false)
             :on-click="toggleVideo"
             :inverted="isCameraOn"
           />
-          <button
-            :class="$style.detailButton"
+          <DetailButton
+            :inverted="isCameraOn"
             @click="
               () => {
                 showCameraDetailSetting = true
               }
             "
-          >
-            <AIcon name="plus-circle" mdi />
-          </button>
+          />
           <CameraDetailSetting
             :open="showCameraDetailSetting"
             :video-inputs="videoInputs"
             @save="handleBackgroundSave"
+            @add="
+              () => {
+                isCameraOn = true
+                cameraIcon = isCameraOn ? 'video' : 'video-off'
+              }
+            "
             @close="
               () => {
                 showCameraDetailSetting = false
@@ -384,10 +390,4 @@ const showShareScreenSettingDetail = ref(false)
   position: relative;
   display: inline-block;
 }
-
-.detailButton {
-  position: absolute;
-  bottom: -6px;
-  right: -6px;
-}
 </style>

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

@@ -8,11 +8,18 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  (e: 'add'): void
   (e: 'close'): void
 }>()
 
 const { addScreenShareTrack } = useQall()
 
+const handleScreenShare = () => {
+  addScreenShareTrack()
+  emit('add')
+  emit('close')
+}
+
 const handleClose = () => {
   emit('close')
 }
@@ -26,7 +33,7 @@ const handleClose = () => {
         <FormButton
           label="画面共有を追加"
           type="tertiary"
-          @click="addScreenShareTrack"
+          @click="handleScreenShare"
         />
         <FormButton label="閉じる" type="secondary" @click="handleClose" />
       </div>