From bf096474073d64fa063b8c6c583f69fd9a38cc0b Mon Sep 17 00:00:00 2001
From: tsukumi <tsukumijima@users.noreply.github.com>
Date: Fri, 24 Nov 2023 17:17:20 +0000
Subject: [PATCH] =?UTF-8?q?Add:=20[Client][Panel/RecordedProgram]=20?=
 =?UTF-8?q?=E9=8C=B2=E7=94=BB=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E5=AE=9F=E9=9A=9B=E3=81=AE=E9=8C=B2=E7=94=BB=E6=9C=9F=E9=96=93?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Watch/Panel/RecordedProgram.vue           | 58 ++++++++-----------
 client/src/utils/ProgramUtils.ts              | 17 ++++++
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Watch/Panel/RecordedProgram.vue b/client/src/components/Watch/Panel/RecordedProgram.vue
index d84e85c6..18a8e822 100644
--- a/client/src/components/Watch/Panel/RecordedProgram.vue
+++ b/client/src/components/Watch/Panel/RecordedProgram.vue
@@ -25,9 +25,14 @@
                     {{genre.major}} / {{genre.middle}}
                 </div>
             </div>
-            <div class="program-info__status">
-                <div class="program-info__status-force">
-                    <Icon icon="bi:chat-left-text-fill" height="14px" style="margin-top: 3px" />
+            <div class="mt-5">
+                <div class="program-info__status">
+                    <Icon icon="ic:round-date-range" height="17px" style="margin-left: -2px; margin-right: -1.7px; margin-bottom: -3px;" />
+                    <span class="ml-2">録画期間: {{playerStore.recorded_program.is_partially_recorded ? '(一部のみ録画)' : ''}}</span><br>
+                    <span>{{ProgramUtils.getRecordingTime(playerStore.recorded_program)}}</span>
+                </div>
+                <div class="program-info__status">
+                    <Icon icon="bi:chat-left-text-fill" height="12.5px" style="margin-bottom: -3px" />
                     <span class="ml-2">コメント数:</span>
                     <span class="ml-2">{{comment_count ?? '--'}}</span>
                 </div>
@@ -110,6 +115,7 @@ export default defineComponent({
                 font-size: 19px;
             }
         }
+
         .program-info__broadcaster {
             display: flex;
             align-items: center;
@@ -125,19 +131,8 @@ export default defineComponent({
                 background: linear-gradient(150deg, var(--v-gray-base), var(--v-background-lighten2));
                 object-fit: cover;
                 user-select: none;
-                @include tablet-vertical {
-                    width: 58px;
-                    height: 32px;
-                }
-                @include smartphone-horizontal {
-                    width: 42px;
-                    height: 23.5px;
-                }
-                @include smartphone-vertical {
-                    width: 58px;
-                    height: 32px;
-                }
             }
+
             .program-info__broadcaster-container {
                 display: flex;
                 flex-direction: column;
@@ -145,9 +140,8 @@ export default defineComponent({
                 .program-info__broadcaster-number {
                     flex-shrink: 0;
                     font-size: 14px;
-                    @include tablet-vertical {
-                        margin-left: 16px;
-                        font-size: 13px;
+                    @include smartphone-horizontal {
+                        font-size: 13.5px;
                     }
                 }
                 .program-info__broadcaster-name {
@@ -156,12 +150,8 @@ export default defineComponent({
                     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-horizontal {
+                        font-size: 13.5px;
                     }
                 }
                 .program-info__broadcaster-time {
@@ -169,11 +159,15 @@ export default defineComponent({
                     color: var(--v-text-darken1);
                     font-size: 13.5px;
                     @include smartphone-horizontal {
+                        font-size: 12px;
+                    }
+                    @include smartphone-vertical {
                         font-size: 12.5px;
                     }
                 }
             }
         }
+
         .program-info__description {
             margin-top: 12px;
             color: var(--v-text-darken1);
@@ -187,6 +181,7 @@ export default defineComponent({
                 font-size: 11px;
             }
         }
+
         .program-info__genre-container {
             display: flex;
             flex-wrap: wrap;
@@ -207,19 +202,12 @@ export default defineComponent({
         }
 
         .program-info__status {
-            display: flex;
-            align-items: center;
-            margin-top: 16px;
-            font-size: 14px;
+            margin-top: 8px;
             color: var(--v-text-darken1);
+            font-size: 12.5px;
+            line-height: 170%;
             @include smartphone-horizontal {
-                margin-top: 10px;
-                font-size: 12px;
-            }
-
-            &-force, &-viewers {
-                display: flex;
-                align-items: center;
+                font-size: 11.5px;
             }
         }
     }
diff --git a/client/src/utils/ProgramUtils.ts b/client/src/utils/ProgramUtils.ts
index 123d1439..e3ed536c 100644
--- a/client/src/utils/ProgramUtils.ts
+++ b/client/src/utils/ProgramUtils.ts
@@ -468,6 +468,23 @@ export class ProgramUtils {
     }
 
 
+    /**
+     * 録画期間の文字列表現を取得する
+     * @param recorded_program 録画番組情報
+     * @returns 録画番組の録画開始時刻〜録画終了時刻
+     */
+    static getRecordingTime(recorded_program: IRecordedProgram): string {
+
+        const start_time = dayjs(recorded_program.recorded_video.recording_start_time);
+        const end_time = dayjs(recorded_program.recorded_video.recording_end_time);
+
+        // 分単位の番組長 (割り切れない場合は小数第2位で四捨五入)
+        const duration = Math.round(recorded_program.recorded_video.duration / 60 * 100) / 100;
+
+        return `${start_time.format('YYYY/MM/DD (dd) HH:mm:ss')} ～ ${end_time.format('HH:mm:ss')} (${duration}分)`;
+    }
+
+
     /**
      * 文字列に含まれる英数や記号を半角に置換し、一律な表現に整える
      * server/app/utils/TSInformation.py の TSInformation.formatString() と同等の処理を行う