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 @@
+
\ 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 @@
+
\ 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 @@
+
\ 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 ? '' : ''),
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: `` + 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;
+ }
+ }
}
}