aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2021-04-12 14:57:15 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-04-12 15:35:39 +0200
commit83ff548125b01eafcbd37d7d005ecf4355697491 (patch)
treed730984033d131a55ec7ecb11f12b0e9d0a08ce3 /client
parentde779034cdfc26282b614f2e825b34cc1f1bbb2c (diff)
downloadPeerTube-83ff548125b01eafcbd37d7d005ecf4355697491.tar.gz
PeerTube-83ff548125b01eafcbd37d7d005ecf4355697491.tar.zst
PeerTube-83ff548125b01eafcbd37d7d005ecf4355697491.zip
add icons in contextmenu
Diffstat (limited to 'client')
-rw-r--r--client/src/assets/player/images/code.svg1
-rw-r--r--client/src/assets/player/images/link-2.svg1
-rw-r--r--client/src/assets/player/images/repeat.svg1
-rw-r--r--client/src/assets/player/peertube-player-manager.ts9
-rw-r--r--client/src/sass/player/context-menu.scss28
5 files changed, 37 insertions, 3 deletions
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 {
500 const isLoopEnabled = player.options_['loop'] 500 const isLoopEnabled = player.options_['loop']
501 const items = [ 501 const items = [
502 { 502 {
503 label: isLoopEnabled ? player.localize('Stop playing in loop') : player.localize('Play in loop'), 503 icon: 'repeat',
504 label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
504 listener: function () { 505 listener: function () {
505 player.options_['loop'] = !isLoopEnabled 506 player.options_['loop'] = !isLoopEnabled
506 } 507 }
@@ -518,6 +519,7 @@ export class PeertubePlayerManager {
518 } 519 }
519 }, 520 },
520 { 521 {
522 icon: 'code',
521 label: player.localize('Copy embed code'), 523 label: player.localize('Copy embed code'),
522 listener: () => { 524 listener: () => {
523 copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle)) 525 copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle))
@@ -534,7 +536,10 @@ export class PeertubePlayerManager {
534 }) 536 })
535 } 537 }
536 538
537 return items 539 return items.map(i => ({
540 ...i,
541 label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
542 }))
538 } 543 }
539 544
540 // adding the menu 545 // 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;
9.video-js .vjs-contextmenu-ui-menu { 9.video-js .vjs-contextmenu-ui-menu {
10 position: absolute; 10 position: absolute;
11 background-color: rgba(0, 0, 0, 0.5); 11 background-color: rgba(0, 0, 0, 0.5);
12 padding: 5px 0; 12 padding: 8px 0;
13 border-radius: 4px;
13 width: $context-menu-width; 14 width: $context-menu-width;
14 15
15 .vjs-menu-content { 16 .vjs-menu-content {
@@ -29,5 +30,30 @@ $context-menu-width: 350px;
29 &:hover { 30 &:hover {
30 background-color: rgba(255, 255, 255, 0.2); 31 background-color: rgba(255, 255, 255, 0.2);
31 } 32 }
33
34 [class^="vjs-icon-"] {
35 display: inline-flex;
36 position: relative;
37 top: 2px;
38 cursor: pointer;
39 width: 14px;
40 height: 14px;
41 background-color: white;
42 mask-size: cover;
43 margin-right: 0.8rem !important;
44
45 $icons: 'link-2', 'repeat', 'code', 'tick-white';
46
47 @each $icon in $icons {
48 &[class$="-#{$icon}"] {
49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
50 }
51 }
52
53 &[class$="-tick-white"] {
54 float: right;
55 margin: 0 !important;
56 }
57 }
32 } 58 }
33} 59}