From e5f0e2ca7e559eed778a700973da32e8775cf632 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 00:34:24 +0900
Subject: [PATCH 1/3] =?UTF-8?q?+=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=8C?=
 =?UTF-8?q?=E3=82=8F=E3=81=8B=E3=82=8A=E3=82=84=E3=81=99=E3=81=8F=E3=81=AA?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/DetailButton.vue   | 67 +++++++++++++++++++
 .../Main/MainView/QallView/QallView.vue       | 28 ++------
 2 files changed, 74 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Main/MainView/QallView/DetailButton.vue

diff --git a/src/components/Main/MainView/QallView/DetailButton.vue b/src/components/Main/MainView/QallView/DetailButton.vue
new file mode 100644
index 000000000..7bf48228f
--- /dev/null
+++ b/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>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 08239d6ec..10bb35388 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/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,16 +213,13 @@ 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"
             @close="
@@ -242,16 +236,14 @@ 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"
@@ -384,10 +376,4 @@ const showShareScreenSettingDetail = ref(false)
   position: relative;
   display: inline-block;
 }
-
-.detailButton {
-  position: absolute;
-  bottom: -6px;
-  right: -6px;
-}
 </style>

From 269b1afc0edab2da4edd2d3c049526e0df239f8b Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 00:40:57 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E9=96=A2=E6=95=B0=E5=AE=9F=E8=A1=8C?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E3=82=89=E9=96=89=E3=81=98=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/CameraDetailSetting.vue | 14 +++++++++++---
 .../MainView/QallView/ScreenShareDetailSetting.vue |  7 ++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/QallView/CameraDetailSetting.vue b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
index 95eecd2e8..aa02b294d 100644
--- a/src/components/Main/MainView/QallView/CameraDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
@@ -51,11 +51,21 @@ 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('close')
+}
+
 const handleClose = () => {
   emit('close')
 }
@@ -155,9 +165,7 @@ const handleClose = () => {
         <FormButton
           label="カメラを追加"
           type="tertiary"
-          @click="
-            addCameraTrack(selectedVideoInput, backgroundType, backgroundImage)
-          "
+          @click="handleAddCameraTrack"
         />
         <FormButton label="閉じる" type="secondary" @click="handleClose" />
       </div>
diff --git a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
index 7f6aef3b2..affb2f217 100644
--- a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
@@ -13,6 +13,11 @@ const emit = defineEmits<{
 
 const { addScreenShareTrack } = useQall()
 
+const handleScreenShare = () => {
+  addScreenShareTrack()
+  emit('close')
+}
+
 const handleClose = () => {
   emit('close')
 }
@@ -26,7 +31,7 @@ const handleClose = () => {
         <FormButton
           label="画面共有を追加"
           type="tertiary"
-          @click="addScreenShareTrack"
+          @click="handleScreenShare"
         />
         <FormButton label="閉じる" type="secondary" @click="handleClose" />
       </div>

From 7c529fcb1b5039afc71defc4745f29a3cf4e0687 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 00:51:39 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:+=E3=83=9C=E3=82=BF=E3=83=B3=E7=B5=8C?=
 =?UTF-8?q?=E7=94=B1=E3=81=A7=E7=94=BB=E9=9D=A2=E3=82=92=E8=B6=B3=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=82=82=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=82=92=E5=A4=89=E3=81=88=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/CameraDetailSetting.vue |  4 +++-
 src/components/Main/MainView/QallView/QallView.vue | 14 ++++++++++++++
 .../MainView/QallView/ScreenShareDetailSetting.vue |  2 ++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Main/MainView/QallView/CameraDetailSetting.vue b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
index aa02b294d..9e332c6a2 100644
--- a/src/components/Main/MainView/QallView/CameraDetailSetting.vue
+++ b/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')
@@ -63,6 +64,7 @@ const handleAddCameraTrack = () => {
     backgroundType.value,
     backgroundImage.value
   )
+  emit('add')
   emit('close')
 }
 
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 10bb35388..4bd2a7064 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -222,6 +222,14 @@ const showShareScreenSettingDetail = ref(false)
           />
           <ScreenShareDetailSetting
             :open="showShareScreenSettingDetail"
+            @add="
+              () => {
+                isScreenSharing = true
+                screenShareIcon = isScreenSharing
+                  ? 'stop-screen-share'
+                  : 'screen-share'
+              }
+            "
             @close="
               () => {
                 showShareScreenSettingDetail = false
@@ -248,6 +256,12 @@ const showShareScreenSettingDetail = ref(false)
             :open="showCameraDetailSetting"
             :video-inputs="videoInputs"
             @save="handleBackgroundSave"
+            @add="
+              () => {
+                isCameraOn = true
+                cameraIcon = isCameraOn ? 'video' : 'video-off'
+              }
+            "
             @close="
               () => {
                 showCameraDetailSetting = false
diff --git a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
index affb2f217..fb5a37e33 100644
--- a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  (e: 'add'): void
   (e: 'close'): void
 }>()
 
@@ -15,6 +16,7 @@ const { addScreenShareTrack } = useQall()
 
 const handleScreenShare = () => {
   addScreenShareTrack()
+  emit('add')
   emit('close')
 }