Update: [Client][Videos/Watch] 一通りスタイル崩れを修正

ぱっと見はいい感じになった
tsukumijima · Nov 10, 2023 · 6aad8d0 · 6aad8d0
1 parent cf46ebe
commit 6aad8d0
Show file tree

Hide file tree

Showing 13 changed files with 237 additions and 84 deletions.
diff --git a/client/src/components/Watch/Header.vue b/client/src/components/Watch/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="watch-header">
+    <header class="watch-header" :class="{'watch-header--video': playback_mode === 'Video'}">
         <router-link class="watch-header__back-icon" v-ripple :to="playback_mode === 'Live' ? '/tv/' : '/video/'">
             <Icon icon="fluent:arrow-left-12-filled" width="25px" />
         </router-link>
@@ -9,10 +9,7 @@
             playback_mode === 'Live' ? channelsStore.channel.current.program_present : playerStore.recorded_program, 'title'
         )"></span>
         <span class="watch-header__program-time">
-            {{ProgramUtils.getProgramTime(
-                playback_mode === 'Live' ? channelsStore.channel.current.program_present : playerStore.recorded_program,
-                playback_mode === 'Live' ? true : false,
-            )}}
+            {{ProgramUtils.getProgramTime(playback_mode === 'Live' ? channelsStore.channel.current.program_present : playerStore.recorded_program, true)}}
         </span>
         <v-spacer></v-spacer>
         <span class="watch-header__now">{{time}}</span>
@@ -102,6 +99,15 @@ export default defineComponent({
         padding-right: 16px;
     }
 
+    &.watch-header--video {
+        .watch-header__program-time {
+            font-size: 13px;
+        }
+        .watch-header__now {
+            display: none;
+        }
+    }
+
     .watch-header__back-icon {
         display: none;
         @include tablet-vertical {

diff --git a/client/src/components/Watch/Panel.vue b/client/src/components/Watch/Panel.vue
@@ -20,6 +20,8 @@
                 :class="{'watch-panel__content--active': panel_active_tab === 'RecordedProgram'}" />
             <Channel class="watch-panel__content" v-if="playback_mode === 'Live'"
                 :class="{'watch-panel__content--active': panel_active_tab === 'Channel'}" />
+            <Series class="watch-panel__content" v-if="playback_mode === 'Video'"
+                :class="{'watch-panel__content--active': panel_active_tab === 'Series'}" />
             <Comment class="watch-panel__content" :playback_mode="playback_mode"
                 :class="{'watch-panel__content--active': panel_active_tab === 'Comment'}" />
             <Twitter class="watch-panel__content" :playback_mode="playback_mode"
@@ -55,7 +57,8 @@
             <div v-ripple class="panel-navigation-button" v-if="playback_mode === 'Video'"
                  :class="{'panel-navigation-button--active': panel_active_tab === 'Series'}"
                  @click="playerStore.video_panel_active_tab = 'Series'">
-                <Icon class="panel-navigation-button__icon" icon="fa-solid:broadcast-tower" width="34px" />
+                <Icon class="panel-navigation-button__icon" icon="fluent:video-clip-multiple-16-filled" width="34px"
+                    style="width: 39px; height: 39px; margin-top: -4px; margin-bottom: -4px;" />
                 <span class="panel-navigation-button__text">シリーズ</span>
             </div>
             <div v-ripple class="panel-navigation-button"
@@ -83,6 +86,7 @@ import Comment from '@/components/Watch/Panel/Comment.vue';
 import Program from '@/components/Watch/Panel/Program.vue';
 import RecordedProgram from '@/components/Watch/Panel/RecordedProgram.vue';
 import Remocon from '@/components/Watch/Panel/Remocon.vue';
+import Series from '@/components/Watch/Panel/Series.vue';
 import Twitter from '@/components/Watch/Panel/Twitter.vue';
 import useChannelsStore from '@/stores/ChannelsStore';
 import usePlayerStore from '@/stores/PlayerStore';
@@ -96,6 +100,7 @@ export default defineComponent({
         Program,
         RecordedProgram,
         Remocon,
+        Series,
         Twitter,
     },
     props: {

diff --git a/client/src/components/Watch/Panel/Comment.vue b/client/src/components/Watch/Panel/Comment.vue
@@ -70,7 +70,7 @@
                 v-if="playback_mode === 'Video' && playerStore.video_comment_init_failed_message === null && comment_list.length === 0">
                 <div class="comment-announce__heading">まだコメントがありません。</div>
                 <div class="comment-announce__text">
-                    <p class="mt-0 mb-0">この録画番組に対応するニコニコ実況の過去ログコメントを読み込んでいます…</p>
+                    <p class="mt-0 mb-0">この録画番組に対応する、ニコニコ実況の過去ログコメントを取得しています...</p>
                 </div>
             </div>
             <div class="comment-announce"
@@ -237,7 +237,8 @@ export default defineComponent({
 
         // LiveCommentManager からコメントを受信したときのイベントハンドラーを登録
         // 非同期関数で登録することで、気持ち高速化を図る
-        this.playerStore.event_emitter.on('LiveCommentReceived', async (event) => {
+        // ビデオ視聴での過去ログコメントは PlayerController から直接このイベントに送信される
+        this.playerStore.event_emitter.on('CommentReceived', async (event) => {
 
             // 初回の過去コメント (最大50件) を受信したとき
             if (event.is_initial_comments === true) {
@@ -281,7 +282,8 @@ export default defineComponent({
         });
 
         // LiveCommentManager からコメントの送信完了イベントを受信したときのイベントハンドラーを登録
-        this.playerStore.event_emitter.on('LiveCommentSendCompleted', async (event) => {
+        // ビデオ視聴では利用しない
+        this.playerStore.event_emitter.on('CommentSendCompleted', async (event) => {
 
             // 送信した自分のコメントをコメントリストに追加
             this.comment_list.push(event.comment);
@@ -324,8 +326,8 @@ export default defineComponent({
         }
 
         // LiveCommentManager からコメントを受信したときのイベントハンドラーを削除
-        this.playerStore.event_emitter.off('LiveCommentReceived');  // LiveCommentReceived イベントの全てのイベントハンドラーを削除
-        this.playerStore.event_emitter.off('LiveCommentSendCompleted');  // LiveCommentSendCompleted イベントの全てのイベントハンドラーを削除
+        this.playerStore.event_emitter.off('CommentReceived');  // CommentReceived イベントの全てのイベントハンドラーを削除
+        this.playerStore.event_emitter.off('CommentSendCompleted');  // CommentSendCompleted イベントの全てのイベントハンドラーを削除
 
         // コメントリストをクリア
         this.comment_list = [];

diff --git a/client/src/components/Watch/Panel/RecordedProgram.vue b/client/src/components/Watch/Panel/RecordedProgram.vue
@@ -6,11 +6,15 @@
             </h1>
             <div class="program-info__broadcaster" v-if="playerStore.recorded_program.channel !== null">
                 <img class="program-info__broadcaster-icon" :src="`${Utils.api_base_url}/channels/${playerStore.recorded_program.channel.id}/logo`">
-                <div class="program-info__broadcaster-number">Ch: {{playerStore.recorded_program.channel.channel_number}}</div>
-                <div class="program-info__broadcaster-name">{{playerStore.recorded_program.channel.name}}</div>
-            </div>
-            <div class="program-info__time">
-                {{ProgramUtils.getProgramTime(playerStore.recorded_program)}}
+                <div class="program-info__broadcaster-container">
+                    <div class="d-flex align-center">
+                        <div class="program-info__broadcaster-number">Ch: {{playerStore.recorded_program.channel.channel_number}}</div>
+                        <div class="program-info__broadcaster-name">{{playerStore.recorded_program.channel.name}}</div>
+                    </div>
+                    <div class="program-info__broadcaster-time">
+                        {{ProgramUtils.getProgramTime(playerStore.recorded_program)}}
+                    </div>
+                </div>
             </div>
             <div class="program-info__description"
                 v-html="ProgramUtils.decorateProgramInfo(playerStore.recorded_program, 'description')">
@@ -23,7 +27,7 @@
             </div>
             <div class="program-info__status">
                 <div class="program-info__status-force">
-                    <Icon icon="fa-solid:fire-alt" height="14px" />
+                    <Icon icon="bi:chat-left-text-fill" height="14px" style="margin-top: 3px" />
                     <span class="ml-2">コメント数:</span>
                     <span class="ml-2">{{'--'}}</span>
                 </div>
@@ -95,13 +99,13 @@ export default defineComponent({
             display: flex;
             align-items: center;
             min-width: 0;
-            margin-top: 12px;
+            margin-top: 16px;
             color: var(--v-text-darken1);
             &-icon {
                 display: inline-block;
                 flex-shrink: 0;
-                width: 40px;
-                height: 20px;
+                width: 44px;
+                height: 36px;
                 border-radius: 3px;
                 background: linear-gradient(150deg, var(--v-gray-base), var(--v-background-lighten2));
                 object-fit: cover;
@@ -119,38 +123,42 @@ export default defineComponent({
                     height: 32px;
                 }
             }
-            &-number {
-                flex-shrink: 0;
+            .program-info__broadcaster-container {
+                display: flex;
+                flex-direction: column;
                 margin-left: 12px;
-                font-size: 14px;
-                @include tablet-vertical {
-                    margin-left: 16px;
-                    font-size: 13px;
+                .program-info__broadcaster-number {
+                    flex-shrink: 0;
+                    font-size: 14px;
+                    @include tablet-vertical {
+                        margin-left: 16px;
+                        font-size: 13px;
+                    }
                 }
-            }
-            &-name {
-                margin-left: 5px;
-                font-size: 14px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                @include tablet-vertical {
-                    margin-left: 8px;
-                    font-size: 13px;
+                .program-info__broadcaster-name {
+                    margin-left: 5px;
+                    font-size: 14px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    @include tablet-vertical {
+                        margin-left: 8px;
+                        font-size: 13px;
+                    }
+                    @include smartphone-vertical {
+                        font-size: 13px;
+                    }
                 }
-                @include smartphone-vertical {
-                    font-size: 13px;
+                .program-info__broadcaster-time {
+                    margin-top: 2px;
+                    color: var(--v-text-darken1);
+                    font-size: 13.5px;
+                    @include smartphone-horizontal {
+                        font-size: 12.5px;
+                    }
                 }
             }
         }
-        .program-info__time {
-            margin-top: 8px;
-            color: var(--v-text-darken1);
-            font-size: 14px;
-            @include smartphone-horizontal {
-                font-size: 13px;
-            }
-        }
         .program-info__description {
             margin-top: 12px;
             color: var(--v-text-darken1);

diff --git a/client/src/components/Watch/Panel/Series.vue b/client/src/components/Watch/Panel/Series.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="series-container">
+        鋭意実装中…
+    </div>
+</template>
+<script lang="ts">
+
+import { mapStores } from 'pinia';
+import { defineComponent } from 'vue';
+
+import usePlayerStore from '@/stores/PlayerStore';
+import Utils from '@/utils';
+
+export default defineComponent({
+    name: 'Panel-SeriesTab',
+    data() {
+        return {
+            // ユーティリティをテンプレートで使えるように
+            Utils: Utils,
+        };
+    },
+    computed: {
+        ...mapStores(usePlayerStore),
+    }
+});
+
+</script>
+<style lang="scss" scoped>
+
+.series-container {
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow-y: auto;
+    @include tablet-vertical {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}
+
+</style>
diff --git a/client/src/components/Watch/Player.vue b/client/src/components/Watch/Player.vue
@@ -2,6 +2,7 @@
     <div class="watch-player" :class="{
         'watch-player--loading': playerStore.is_loading,
         'watch-player--virtual-keyboard-display': playerStore.is_virtual_keyboard_display && Utils.hasActiveElementClass('dplayer-comment-input'),
+        'watch-player--video': playback_mode === 'Video',
     }">
         <div class="watch-player__background-wrapper">
             <div class="watch-player__background" :class="{'watch-player__background--display': playerStore.is_background_display}"
@@ -136,6 +137,20 @@ export default defineComponent({
             padding-left: calc(0px + 18px) !important;
         }
 
+        .dplayer-bar-wrap {
+            bottom: 54px !important;
+            width: calc(100% - 128px);
+            padding-left: 12px;
+            @include tablet-vertical {
+                width: calc(100% - (18px * 2));
+            }
+            @include smartphone-horizontal {
+                width: calc(100% - (18px * 2));
+            }
+            @include smartphone-vertical {
+                width: calc(100% - (18px * 2));
+            }
+        }
         .dplayer-time, .dplayer-live-badge {
             color: var(--v-text-base) !important;
         }
@@ -304,6 +319,10 @@ export default defineComponent({
             @include smartphone-vertical {
                 padding-left: calc(0px + 18px) !important;
             }
+            .dplayer-bar-wrap {
+                bottom: 51px !important;
+                padding-left: 0px !important;
+            }
         }
         &.dplayer-hide-controller .dplayer-controller {
             transform: none !important;
@@ -312,9 +331,47 @@ export default defineComponent({
 }
 
 // ロード中は DPlayer 内の動画と BML ブラウザを非表示にする
-.watch-player--loading {
-    .dplayer-video-wrap-aspect, .dplayer-bml-browser {
-        opacity: 0 !important;
+.watch-player.watch-player--loading {
+    .watch-player__dplayer {
+        .dplayer-video-wrap-aspect, .dplayer-bml-browser {
+            opacity: 0 !important;
+        }
+    }
+}
+
+// 仮想キーボード表示時
+.watch-player.watch-player--virtual-keyboard-display {
+    .watch-player__dplayer {
+        .dplayer-controller-mask {
+            position: absolute;
+            bottom: env(keyboard-inset-height, 0px) !important;
+            @include tablet-vertical {
+                bottom: 0px !important;
+            }
+            @include smartphone-vertical {
+                bottom: 0px !important;
+            }
+        }
+        .dplayer-icons.dplayer-comment-box {
+            position: absolute;
+            bottom: calc(env(keyboard-inset-height, 0px) + 4px) !important;
+            @include tablet-vertical {
+                bottom: 6px !important;
+            }
+            @include smartphone-vertical {
+                bottom: 6px !important;
+            }
+        }
+    }
+}
+
+// ビデオ視聴時のみ適用されるスタイル
+.watch-player.watch-player--video {
+    .watch-player__dplayer {
+        // コメント送信用ボタンを削除
+        .dplayer-controller .dplayer-icons .dplayer-comment {
+            display: none !important;
+        }
     }
 }