Update: [Client][Player/CaptureManager] コメント付きキャプチャボタンのアイコンをキャプチャボタンと…

…差別化する
tsukumijima · Aug 24, 2024 · 0b1328b · 0b1328b
1 parent 533354d
commit 0b1328b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/client/src/components/Watch/Player.vue b/client/src/components/Watch/Player.vue
@@ -228,6 +228,12 @@ export default defineComponent({
                         }
                     }
                 }
+                &.dplayer-comment-capture-icon {
+                    padding: 7.3px !important;
+                    @include smartphone-vertical {
+                        padding: 5.4px !important;
+                    }
+                }
                 // ブラウザフルスクリーンボタンを削除（実質あまり意味がないため）
                 &.dplayer-full-in-icon {
                     display: none !important;

diff --git a/client/src/services/player/managers/CaptureManager.ts b/client/src/services/player/managers/CaptureManager.ts
@@ -66,7 +66,7 @@ class CaptureManager implements PlayerManager {
             <div class="dplayer-icon dplayer-capture-icon" aria-label="キャプチャ"
                 data-balloon-nofocus="" data-balloon-pos="up">
                 <span class="dplayer-icon-content">
-                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path d="M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z"></path></svg>
                 </span>
             </div>
         `);
@@ -77,7 +77,7 @@ class CaptureManager implements PlayerManager {
             <div class="dplayer-icon dplayer-comment-capture-icon" aria-label="コメントを付けてキャプチャ"
                 data-balloon-nofocus="" data-balloon-pos="up">
                 <span class="dplayer-icon-content">
-                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path d="M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 32"><path d="M34.18 18.5682H24.4869C23.4829 18.5682 22.6693 19.3525 22.6693 20.32V27.314C22.6693 28.2815 23.4829 29.0658 24.4869 29.0658H26.3045V27.9118H29.916L26.1407 31.3811L26.8138 32L30.0067 29.0658H34.18C35.1835 29.0658 35.9976 28.2815 35.9976 27.314V20.32C35.9976 19.3521 35.1835 18.5682 34.18 18.5682ZM34.786 26.7441C34.786 27.3888 34.2436 27.9118 33.5744 27.9118H29.9813L29.9487 27.8817L29.916 27.9118H25.0925C24.4233 27.9118 23.8809 27.3888 23.8809 26.7441V20.9037C23.8809 20.2585 24.4233 19.7355 25.0925 19.7355H33.574C34.2432 19.7355 34.7855 19.6749 34.7855 20.3196V26.7437L34.786 26.7441ZM26.4773 22.9422C25.9521 22.9422 25.5253 23.3337 25.5253 23.8172C25.5253 24.3007 25.9516 24.6918 26.4773 24.6918C27.0033 24.6918 27.4297 24.3003 27.4297 23.8172C27.4297 23.3341 27.0033 22.9422 26.4773 22.9422ZM32.1892 22.9422C31.6631 22.9422 31.2372 23.3337 31.2372 23.8172C31.2372 24.3007 31.6631 24.6918 32.1892 24.6918C32.7152 24.6918 33.1412 24.3003 33.1412 23.8172C33.1412 23.3341 32.7152 22.9422 32.1892 22.9422ZM29.3337 22.9422C28.8076 22.9422 28.3817 23.3337 28.3817 23.8172C28.3817 24.3007 28.8076 24.6918 29.3337 24.6918C29.8589 24.6918 30.2856 24.3003 30.2856 23.8172C30.2856 23.3341 29.8593 22.9422 29.3337 22.9422Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 23C12.691 23 10 20.309 10 17C10 13.691 12.691 11 16 11C19.309 11 22 13.691 22 17C22 20.309 19.309 23 16 23ZM16 13C13.794 13 12 14.794 12 17C12 19.206 13.794 21 16 21C18.206 21 20 19.206 20 17C20 14.794 18.206 13 16 13ZM30 9V16.4888H28V9C28 8.449 27.552 8 27 8H16C15.448 8 15 7.552 15 7C15 6.448 15.448 6 16 6H27C28.654 6 30 7.346 30 9ZM20.5905 28V26H5C4.449 26 4 25.552 4 25V9C4 8.449 4.449 8 5 8H8C8.552 8 9 7.552 9 7C9 6.448 8.552 6 8 6H5C3.346 6 2 7.346 2 9V25C2 26.654 3.346 28 5 28H20.5905ZM24 10.5C24 11.328 24.672 12 25.5 12C26.328 12 27 11.328 27 10.5C27 9.672 26.328 9 25.5 9C24.672 9 24 9.672 24 10.5ZM15 4C15 4.552 14.552 5 14 5H10C9.448 5 9 4.552 9 4C9 3.448 9.448 3 10 3H14C14.552 3 15 3.448 15 4Z"/></svg>
                 </span>
             </div>
         `);