From 83ff548125b01eafcbd37d7d005ecf4355697491 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Mon, 12 Apr 2021 14:57:15 +0200
Subject: [PATCH] add icons in contextmenu

---
 client/src/assets/player/images/code.svg      |  1 +
 client/src/assets/player/images/link-2.svg    |  1 +
 client/src/assets/player/images/repeat.svg    |  1 +
 .../assets/player/peertube-player-manager.ts  |  9 ++++--
 client/src/sass/player/context-menu.scss      | 28 ++++++++++++++++++-
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 client/src/assets/player/images/code.svg
 create mode 100644 client/src/assets/player/images/link-2.svg
 create mode 100644 client/src/assets/player/images/repeat.svg

diff --git a/client/src/assets/player/images/code.svg b/client/src/assets/player/images/code.svg
new file mode 100644
index 000000000..9280eda7f
--- /dev/null
+++ b/client/src/assets/player/images/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
\ No newline at end of file
diff --git a/client/src/assets/player/images/link-2.svg b/client/src/assets/player/images/link-2.svg
new file mode 100644
index 000000000..d43203590
--- /dev/null
+++ b/client/src/assets/player/images/link-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/client/src/assets/player/images/repeat.svg b/client/src/assets/player/images/repeat.svg
new file mode 100644
index 000000000..0365462ab
--- /dev/null
+++ b/client/src/assets/player/images/repeat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
\ No newline at end of file
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 018845a54..b112e231f 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -500,7 +500,8 @@ export class PeertubePlayerManager {
       const isLoopEnabled = player.options_['loop']
       const items = [
         {
-          label: isLoopEnabled ? player.localize('Stop playing in loop') : player.localize('Play in loop'),
+          icon: 'repeat',
+          label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
           listener: function () {
             player.options_['loop'] = !isLoopEnabled
           }
@@ -518,6 +519,7 @@ export class PeertubePlayerManager {
           }
         },
         {
+          icon: 'code',
           label: player.localize('Copy embed code'),
           listener: () => {
             copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle))
@@ -534,7 +536,10 @@ export class PeertubePlayerManager {
         })
       }
 
-      return items
+      return items.map(i => ({
+        ...i,
+        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
+      }))
     }
 
     // adding the menu
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index ad673eea7..df78916c6 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -9,7 +9,8 @@ $context-menu-width: 350px;
 .video-js .vjs-contextmenu-ui-menu {
   position: absolute;
   background-color: rgba(0, 0, 0, 0.5);
-  padding: 5px 0;
+  padding: 8px 0;
+  border-radius: 4px;
   width: $context-menu-width;
 
   .vjs-menu-content {
@@ -29,5 +30,30 @@ $context-menu-width: 350px;
     &:hover {
       background-color: rgba(255, 255, 255, 0.2);
     }
+
+    [class^="vjs-icon-"] {
+      display: inline-flex;
+      position: relative;
+      top: 2px;
+      cursor: pointer;
+      width: 14px;
+      height: 14px;
+      background-color: white;
+      mask-size: cover;
+      margin-right: 0.8rem !important;
+
+      $icons: 'link-2', 'repeat', 'code', 'tick-white';
+
+      @each $icon in $icons {
+        &[class$="-#{$icon}"] {
+          mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+        }
+      }
+
+      &[class$="-tick-white"] {
+        float: right;
+        margin: 0 !important;
+      }
+    }
   }
 }