add icons in contextmenu

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

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;
+      }
+    }
   }
 }