Merge pull request #322 from traPtitech/overlay-update

オーバレイの変更

Author: Rozelin-dc

.gitignore

@@ -7,6 +7,8 @@ node_modules
 dist
 *.local
 
+.vscode
+
 /client/src/lib/pb/**
 !/client/src/lib/pb/index.ts
 /client/src/lib/apis/generated/**

README.md

@@ -3,6 +3,7 @@
 ## 開発環境
 
 golang 1.17
+
 node 16
 
 download https://github.com/protocolbuffers/protobuf/releases

client/src/components/Admin/PresentationStatics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.presentaionStatics">
+  <div :class="$style.presentationStatics">
     <h3>{{ presentation.name }}</h3>
     <p>{{ presentation.description }}</p>
     <p>{{ presentation.speakers }}</p>
@@ -45,7 +45,7 @@ import apis, {
   Comment,
   ReviewStatistics
 } from '/@/lib/apis'
-import { stampToFileName } from '/@/components/LiveOverlay/reactionRenderer'
+import { stampToFileName } from '/@/use/reactionRenderer'
 
 interface State {
   reactions: ReactionStatistics | null

client/src/components/CommentList.vue

@@ -1,6 +1,6 @@
 <template>
   <transition-group name="transition" tag="ul" :class="$style.list">
-    <li v-for="c in comments" :key="c">{{ c }}</li>
+    <li v-for="c in comments" :key="c" :class="$style.comment">{{ c }}</li>
   </transition-group>
 </template>
 
@@ -39,6 +39,13 @@ export default defineComponent({
 <style lang="scss" module>
 .list {
   padding: 0.5rem;
+  text-align: center;
   word-break: break-all;
 }
+.comment {
+  background-color: white;
+  border-radius: 10px;
+  padding: 0.5rem 10px;
+  margin: 5px 0;
+}
 </style>

client/src/components/Live.vue

@@ -27,6 +27,7 @@ export default defineComponent({
   left: 0;
   bottom: 0;
   right: 0;
+  pointer-events: all;
 }
 .iframe {
   height: 100%;

client/src/components/LiveOverlay/BottomControls.vue

@@ -1,30 +1,32 @@
 <template>
   <div :class="$style.container">
-    <comment-sender v-show="show" />
-    <button v-show="show" :class="$style.button" @click="$emit('toggleDesc')">
-      説明
-    </button>
-    <button :class="$style.button" @click="$emit('toggle')">表示/非表示</button>
+    <input
+      ref="inputRef"
+      v-model="text"
+      :class="$style.input"
+      type="text"
+      placeholder="コメント"
+      @keydown.enter="comment"
+    />
+
+    <div :class="$style.bottomContents">
+      <button :class="$style.button" @click="$emit('toggle')">
+        表示/非表示
+      </button>
+      <button :class="$style.button" @click="$emit('toggleDesc')">説明</button>
+      <button :class="$style.button" @click="comment">送信</button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
 import { useStore } from '/@/store'
 import { sendComment } from '/@/lib/connect'
-import CommentSender from './CommentSender.vue'
+import useShortcut from '/@/use/shortcut'
 
 export default defineComponent({
   name: 'BottomControls',
-  components: {
-    CommentSender
-  },
-  props: {
-    show: {
-      type: Boolean,
-      required: true
-    }
-  },
   emits: {
     toggle: () => true,
     toggleDesc: () => true
@@ -35,23 +37,43 @@ export default defineComponent({
 
     const text = ref('')
     const comment = () => {
+      if (!text.value) return
       sendComment({ presentationId: presentationId.value, text: text.value })
       text.value = ''
     }
 
-    return { text, comment }
+    const inputRef = ref<HTMLInputElement>()
+    useShortcut({ key: ' ', ctrlKey: true }, () => {
+      inputRef.value?.focus()
+    })
+
+    return { text, inputRef, comment }
   }
 })
 </script>
 
 <style lang="scss" module>
 .container {
-  display: flex;
   pointer-events: auto;
-  background: rgba(255, 255, 255, 0.8);
+  background: white;
+  text-align: center;
+  padding: 10px 5%;
+}
+.input {
+  width: 100%;
+  height: 2rem;
+  border-radius: 20px;
+  border: 2px solid #c9c1b1;
+  &:focus {
+    border-color: #fff344;
+  }
+}
+.bottomContents {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 .button {
   margin: 0 8px;
-  padding: 0 8px;
 }
 </style>

client/src/components/LiveOverlay/CommentPanel.vue

@@ -1,8 +1,7 @@
 <template>
   <div :class="$style.container">
-    <comment-list v-if="isCommentsShown" :class="$style.list" />
+    <comment-list :class="$style.list" />
     <button @click="popupCommentsList">コメントパネルポップアップ</button>
-    <button @click="toggleIsCommentsShown">コメントパネル表示切替</button>
   </div>
 </template>
 
@@ -22,11 +21,6 @@ export default defineComponent({
     const store = useStore()
     const presentationId = computed(() => store.state.presentation?.id ?? null)
 
-    const isCommentsShown = ref(true)
-    const toggleIsCommentsShown = () => {
-      isCommentsShown.value = !isCommentsShown.value
-    }
-
     const comments = ref<string[]>([])
     onMounted(async () => {
       if (!presentationId.value) return
@@ -54,8 +48,6 @@ export default defineComponent({
     }
 
     return {
-      isCommentsShown,
-      toggleIsCommentsShown,
       comments,
       popupCommentsList
     }
@@ -68,11 +60,11 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   width: min(20vw, 20rem);
-  background: rgba(255, 255, 255, 0.8);
+  background: #fff9ed;
   pointer-events: auto;
 }
 .list {
-  height: min(30vh, 30rem);
+  flex: 1;
   overflow-y: scroll;
 }
 </style>

client/src/components/LiveOverlay/CommentSender.vue

@@ -1,11 +1,10 @@
 <template>
   <div :class="$style.container">
-    <top-controls :show="show" />
-    <live-overlay-view :show="show" />
+    <live-overlay-view :class="$style.overlay" :show="show" />
+    <stamp-controls :class="$style.stampControls" />
+    <comment-panel :class="$style.commentPanel" />
     <bottom-controls
       :class="$style.bottomControls"
-      :data-is-shown="show"
-      :show="show"
       @toggle="toggle"
       @toggle-desc="$emit('toggleDesc')"
     />
@@ -14,21 +13,27 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import TopControls from './TopControls.vue'
-import BottomControls from './BottomControls.vue'
-import LiveOverlayView from './LiveOverlayView.vue'
+import LiveOverlayView from '/@/components/LiveOverlay/LiveOverlayView.vue'
+import StampControls from '/@/components/LiveOverlay/StampControls.vue'
+import CommentPanel from '/@/components/LiveOverlay/CommentPanel.vue'
+import BottomControls from '/@/components/LiveOverlay/BottomControls.vue'
+import { useStore } from '/@/store'
 
 export default defineComponent({
   name: 'LiveOverlay',
   components: {
-    TopControls,
     LiveOverlayView,
+    StampControls,
+    CommentPanel,
     BottomControls
   },
   emits: {
     toggleDesc: () => true
   },
   setup() {
+    const store = useStore()
+    store.dispatch.fetchLive()
+
     const show = ref(true)
     const toggle = () => {
       show.value = !show.value
@@ -41,18 +46,26 @@ export default defineComponent({
 
 <style lang="scss" module>
 .container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template: 1fr min-content / 1fr min-content;
+}
+.overlay {
+  grid-row: 1;
+  grid-column: 1;
+}
+.stampControls {
+  grid-row: 2;
+  grid-column: 1;
+}
+.commentPanel {
+  grid-row: 1;
+  grid-column: 2;
+  min-height: 0;
 }
 .bottomControls {
-  &:not([data-is-shown='true']) {
-    align-self: flex-end;
-  }
+  grid-row: 2;
+  grid-column: 2;
 }
 </style>