Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ユーザーリストの画面共有をいい感じに #4495

Merged
merged 7 commits into from
Jan 26, 2025
Merged

ユーザーリストの画面共有をいい感じに #4495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5fd1828
fix:ボタンの配置位置
mathsuky Jan 26, 2025
1cb67d4
wip:ユーザーリストの表示が崩れていたのを無理やり修正
mathsuky Jan 26, 2025
4613ed4
wip:拡大表示の解除など
mathsuky Jan 26, 2025
f1d552d
wip: absoluteを用いまくった最悪な位置指定
mathsuky Jan 26, 2025
3b1b1f3
最低限の機能完成
mathsuky Jan 26, 2025
eaf04e4
QallViewにflexレイアウト適用
mathsuky Jan 26, 2025
5da6b8f
fix:absoluteを削除
mathsuky Jan 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 135 additions & 155 deletions src/components/Main/MainView/QallView/QallView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,7 @@
isCameraOn.value = false
}
} catch (err) {
// eslint-disable-next-line no-console
console.error('Failed to toggle video:', err)

Check warning on line 73 in src/components/Main/MainView/QallView/QallView.vue

View workflow job for this annotation

GitHub Actions / run lint 

Unexpected console statement
}
}

Expand All @@ -93,8 +92,7 @@
isScreenSharing.value = false
}
} catch (err) {
// eslint-disable-next-line no-console
console.error('Failed to toggle screen sharing:', err)

Check warning on line 95 in src/components/Main/MainView/QallView/QallView.vue

View workflow job for this annotation

GitHub Actions / run lint 

Unexpected console statement
}
}

Expand Down Expand Up @@ -191,120 +189,98 @@
:class="$style.closeButton"
@click="isSubView = true"
/>
<UserList />

<div :class="$style.TrackContainer">
<div :class="$style.controlBar">
<div :class="$style.smallButtonGroup">
<div :class="$style.soundBoardButton">
<CallControlButtonSmall
icon="sound_detection_loud_sound"
:on-click="handleSound"

<!-- 縦並び用のラッパ -->
<div :class="$style.stackContainer">
<UserList :class="$style.userList" />

<div :class="$style.controlBarContainer">
<div :class="$style.controlBar">
<div :class="$style.smallButtonGroup">
<div :class="$style.soundBoardButton">
<CallControlButtonSmall
icon="sound_detection_loud_sound"
:on-click="handleSound"
/>
<ClickOutside @click-outside="showSoundBoard = false">
<SoundBoard v-if="showSoundBoard" />
</ClickOutside>
</div>
<div ref="reactionButton">
<CallControlButtonSmall
icon="add_reaction"
:on-click="handleReaction"
/>
</div>
</div>
<div :class="$style.verticalBar"></div>
<div :class="$style.buttonWithDetail">
<CallControlButton
:icon="screenShareIcon"
:is-on="isScreenSharing"
:on-click="toggleScreen"
:mdi="false"
:inverted="isScreenSharing"
/>
<DetailButton @click="showShareScreenSettingDetail = true" />
<ScreenShareDetailSetting
:open="showShareScreenSettingDetail"
@add="isScreenSharing = true"
@close="showShareScreenSettingDetail = false"
/>
<ClickOutside @click-outside="showSoundBoard = false">
<SoundBoard v-if="showSoundBoard" />
</ClickOutside>
</div>
<div ref="reactionButton">
<CallControlButtonSmall
icon="add_reaction"
:on-click="handleReaction"
<div :class="$style.buttonWithDetail">
<CallControlButton
:icon="cameraIcon"
:is-on="isCameraOn"
:on-click="toggleVideo"
:inverted="isCameraOn"
/>
<DetailButton
:inverted="isCameraOn"
@click="showCameraDetailSetting = true"
/>
<CameraDetailSetting
:open="showCameraDetailSetting"
:video-inputs="videoInputs"
@save="handleBackgroundSave"
@add="isCameraOn = true"
@close="showCameraDetailSetting = false"
/>
</div>
</div>
<div :class="$style.verticalBar"></div>
<div :class="$style.buttonWithDetail">
<CallControlButton
:icon="screenShareIcon"
:is-on="isScreenSharing"
:on-click="toggleScreen"
:mdi="false"
:inverted="isScreenSharing"
/>
<DetailButton
@click="
() => {
showShareScreenSettingDetail = true
}
"
/>
<ScreenShareDetailSetting
:open="showShareScreenSettingDetail"
@add="
() => {
isScreenSharing = true
}
"
@close="
() => {
showShareScreenSettingDetail = false
}
"
:icon="micIcon"
:is-on="isMicOn"
:on-click="toggleAudio"
:inverted="isMicOn"
/>
</div>
<div :class="$style.buttonWithDetail">
<CallControlButton
:icon="cameraIcon"
:is-on="isCameraOn"
:on-click="toggleVideo"
:inverted="isCameraOn"
/>
<DetailButton
:inverted="isCameraOn"
@click="
() => {
showCameraDetailSetting = true
}
"
/>
<CameraDetailSetting
:open="showCameraDetailSetting"
:video-inputs="videoInputs"
@save="handleBackgroundSave"
@add="
() => {
isCameraOn = true
}
"
@close="
() => {
showCameraDetailSetting = false
}
"
icon="phone-hangup"
is-on
:on-click="leaveQall"
:on-background-color="'#F26451'"
/>
</div>
<CallControlButton
:icon="micIcon"
:is-on="isMicOn"
:on-click="toggleAudio"
:inverted="isMicOn"
/>
<CallControlButton
icon="phone-hangup"
is-on
:on-click="leaveQall"
:on-background-color="'#F26451'"
/>
<div :class="$style.verticalBar"></div>
<div :class="$style.smallButtonGroup">
<div :class="$style.participantsContainer">
<ClickOutside @click-outside="showParticipants = false">
<div v-if="showParticipants" :class="$style.participantsList">
<div :class="$style.participantsContent">
<participant-list
v-for="participant in filteredParticipants"
:key="participant.user.id"
:participant="participant.user"
:track-info="getParticipantTrackInfo(participant)!"
/>
<div :class="$style.verticalBar"></div>
<div :class="$style.smallButtonGroup">
<div :class="$style.participantsContainer">
<ClickOutside @click-outside="showParticipants = false">
<div v-if="showParticipants" :class="$style.participantsList">
<div :class="$style.participantsContent">
<participant-list
v-for="participant in filteredParticipants"
:key="participant.user.id"
:participant="participant.user"
:track-info="getParticipantTrackInfo(participant)!"
/>
</div>
</div>
</div>
</ClickOutside>
<CallControlButtonSmall
icon="account-multiple"
:on-click="handleGroup"
mdi
/>
</ClickOutside>
<CallControlButtonSmall
icon="account-multiple"
:on-click="handleGroup"
mdi
/>
</div>
</div>
</div>
</div>
Expand All @@ -314,55 +290,33 @@
</template>

<style lang="scss" module>
.participantsContainer {
.Block {
height: 100%;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}

.participantsList {
position: absolute;
bottom: 100%;
right: 50%;
width: 450px;
height: 300px;
@include background-primary;
border-radius: 8px;
margin-bottom: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transform: translateX(50%);
@include color-ui-primary;
}

.participantsContent {
.stackContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
height: 100%;
overflow-y: auto;
padding: 16px;
border: 2px solid $theme-background-secondary-default;
border-radius: 8px;
}

.TrackContainer {
height: fit-content;
}

.channelView {
position: absolute;
width: 30%;
right: 0;
bottom: 0;
}

.Block {
height: 100%;
height: 100%;
.userList {
flex-grow: 1;
}

.Header {
font: {
size: 30px;
weight: bold;
}
color: green;
text-align: center;
.controlBarContainer {
width: 100%;
display: flex;
justify-content: end;
flex-grow: 0;
margin-bottom: 24px;
}

.controlBar {
Expand All @@ -373,13 +327,6 @@
width: 100%;
}

.verticalBar {
width: 1px;
height: 64px;
background-color: #ced6db;
margin: 0 16px;
}

.smallButtonGroup {
display: flex;
align-items: center;
Expand All @@ -395,6 +342,39 @@
position: relative;
}

.participantsContainer {
position: relative;
}

.participantsList {
position: absolute;
bottom: 100%;
right: 50%;
width: 450px;
height: 300px;
@include background-primary;
border-radius: 8px;
margin-bottom: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transform: translateX(50%);
@include color-ui-primary;
}

.participantsContent {
height: 100%;
overflow-y: auto;
padding: 16px;
border: 2px solid $theme-background-secondary-default;
border-radius: 8px;
}

.verticalBar {
width: 1px;
height: 64px;
background-color: #ced6db;
margin: 0 16px;
}

.closeButton {
position: absolute;
top: 1rem;
Expand Down
Loading
Loading