mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2024-09-11 21:47:09 +03:00
add icons in contextmenu
This commit is contained in:
parent
de779034cd
commit
83ff548125
1
client/src/assets/player/images/code.svg
Normal file
1
client/src/assets/player/images/code.svg
Normal 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>
|
After Width: | Height: | Size: 307 B |
1
client/src/assets/player/images/link-2.svg
Normal file
1
client/src/assets/player/images/link-2.svg
Normal 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>
|
After Width: | Height: | Size: 355 B |
1
client/src/assets/player/images/repeat.svg
Normal file
1
client/src/assets/player/images/repeat.svg
Normal 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>
|
After Width: | Height: | Size: 392 B |
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user