Fix: [Client][Videos/Watch] プログレスバーの長さが UI と合わない問題を修正

大元の CSS の実装があまり良くない上に無理やり KonomiTV の UI に合致させようとスタイルを上書きしているため、適切に合わせるのがかなり大変だった…

client/src/components/Watch/Player.vue

@@ -123,33 +123,28 @@ export default defineComponent({
 
     .dplayer-controller {
         padding-left: calc(68px + 18px) !important;
+        padding-right: calc(0px + 18px) !important;
         padding-bottom: 6px !important;
         transition: opacity 0.3s ease, visibility 0.3s ease;
         opacity: 0 !important;
         visibility: hidden;
         @include tablet-vertical {
             padding-left: calc(0px + 18px) !important;
+            padding-right: calc(0px + 18px) !important;
         }
         @include smartphone-horizontal {
             padding-left: calc(0px + 18px) !important;
+            padding-right: calc(0px + 18px) !important;
         }
         @include smartphone-vertical {
             padding-left: calc(0px + 18px) !important;
+            padding-right: 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));
-            }
+            width: calc(100% - 68px - (18px * 2));
+            box-sizing: border-box;
         }
         .dplayer-time, .dplayer-live-badge {
             color: var(--v-text-base) !important;
@@ -310,24 +305,44 @@ export default defineComponent({
     &.dplayer-mobile {
         .dplayer-controller {
             padding-left: calc(68px + 30px) !important;
+            padding-right: calc(0px + 30px) !important;
             @include tablet-vertical {
                 padding-left: calc(0px + 18px) !important;
+                padding-right: calc(0px + 18px) !important;
             }
             @include smartphone-horizontal {
                 padding-left: calc(0px + 18px) !important;
+                padding-right: calc(0px + 18px) !important;
             }
             @include smartphone-vertical {
                 padding-left: calc(0px + 18px) !important;
+                padding-right: calc(0px + 18px) !important;
             }
             .dplayer-bar-wrap {
                 bottom: 51px !important;
-                padding-left: 0px !important;
+                width: calc(100% - 68px - (30px * 2));
+                @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-hide-controller .dplayer-controller {
             transform: none !important;
         }
     }
+
+    // 狭小幅デバイスのみ適用されるスタイル
+    &.dplayer-narrow {
+        .dplayer-icons.dplayer-icons-right {
+            right: 14px !important;
+        }
+    }
 }
 
 // ロード中は DPlayer 内の動画と BML ブラウザを非表示にする

client/src/components/Watch/Watch.vue

@@ -220,7 +220,7 @@ export default Vue.extend({
     }
 }
 
-// フルスクリーン+コントロール表示時
+// フルスクリーン時 + コントロール表示時
 .watch-container.watch-container--fullscreen.watch-container--control-display {
     .watch-player__dplayer {
         .dplayer-notice, .dplayer-info-panel {
@@ -250,6 +250,27 @@ export default Vue.extend({
     }
 }
 
+// ビデオ視聴時 + フルスクリーン時のみ適用されるスタイル
+.watch-container.watch-container--video.watch-container--fullscreen {
+    .watch-player__dplayer {
+        .dplayer-bar-wrap {
+            width: calc(100% - (18px * 2));
+        }
+        &.dplayer-mobile .dplayer-bar-wrap {
+            width: calc(100% - (30px * 2));
+            @include tablet-vertical {
+                width: calc(100% - (18px * 2));
+            }
+            @include smartphone-horizontal {
+                width: calc(100% - (18px * 2));
+            }
+            @include smartphone-vertical {
+                width: calc(100% - (18px * 2));
+            }
+        }
+    }
+}
+
 </style>
 <style lang="scss" scoped>