forks/peertube
1
0
Fork 0
Code Releases Activity

add icons in contextmenu

Browse source
This commit is contained in:
Rigel Kent 2021-04-12 14:57:15 +02:00 committed by Chocobozzz
parent de779034cd
commit 83ff548125
5 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/src/assets/player/images/code.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 307 B

1
client/src/assets/player/images/link-2.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 355 B

1
client/src/assets/player/images/repeat.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 392 B

9
client/src/assets/player/peertube-player-manager.ts
View file

@ -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

28
client/src/sass/player/context-menu.scss
View file

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