diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 3fda7ee4d..093e88033 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -23,7 +23,8 @@ const icons = {
'dislike': require('../../../assets/images/video/dislike.html'),
'heart': require('../../../assets/images/video/heart.html'),
'like': require('../../../assets/images/video/like.html'),
- 'more': require('../../../assets/images/video/more.html'),
+ 'more-horizontal': require('../../../assets/images/global/more-horizontal.html'),
+ 'more-vertical': require('../../../assets/images/global/more-vertical.html'),
'share': require('../../../assets/images/video/share.html'),
'upload': require('../../../assets/images/video/upload.html'),
'playlist-add': require('../../../assets/images/video/playlist-add.html')
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index ed3cd8dc5..f85e50d6d 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -2,10 +2,10 @@
Save to
-
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index 68dcda1eb..bc0d55912 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -18,6 +18,8 @@
}
.options {
+ display: flex;
+ align-items: center;
font-size: 14px;
cursor: pointer;
@@ -25,7 +27,8 @@
@include apply-svg-color(#333);
width: 16px;
- height: 16px;
+ height: 23px;
+ margin-right: 3px;
}
}
}
diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index f8cd47f73..72158eb10 100644
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -29,7 +29,8 @@
padding: 0 10px;
display: flex;
align-items: center;
- font-size: 15px;
+ font-size: 14px;
+ font-weight: $font-semibold;
}
}
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index c936a8207..95b5e3671 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,5 +1,5 @@
import { User } from '../'
-import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
+import { PlaylistElement, Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
import { durationToString, getAbsoluteAPIUrl } from '../misc/utils'
@@ -47,6 +47,8 @@ export class Video implements VideoServerModel {
blacklisted?: boolean
blacklistedReason?: string
+ playlistElement?: PlaylistElement
+
account: {
id: number
uuid: string
@@ -125,6 +127,8 @@ export class Video implements VideoServerModel {
this.blacklistedReason = hash.blacklistedReason
this.userHistory = hash.userHistory
+
+ this.playlistElement = hash.playlistElement
}
isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 615b88bd6..394c31f23 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -91,7 +91,7 @@
-
+
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index ff321fdbc..44040e90d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -228,15 +228,7 @@ $other-videos-width: 260px;
display: inline-block;
.dropdown-menu .dropdown-item {
- padding: 6px 24px;
-
- my-global-icon {
- width: 24px;
-
- margin-right: 10px;
- position: relative;
- top: -2px;
- }
+ @include dropdown-with-icon-item;
}
}
}
diff --git a/client/src/assets/images/video/more.html b/client/src/assets/images/global/more-horizontal.html
similarity index 100%
rename from client/src/assets/images/video/more.html
rename to client/src/assets/images/global/more-horizontal.html
diff --git a/client/src/assets/images/global/more-vertical.html b/client/src/assets/images/global/more-vertical.html
new file mode 100644
index 000000000..9bff87a82
--- /dev/null
+++ b/client/src/assets/images/global/more-vertical.html
@@ -0,0 +1,11 @@
+
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 36d4e84d3..25a024aac 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -28,15 +28,15 @@ $play-overlay-transition: 0.2s ease;
$play-overlay-height: 26px;
$play-overlay-width: 18px;
-@mixin miniature-thumbnail {
+@mixin miniature-thumbnail($width: $video-thumbnail-width, $height: $video-thumbnail-height) {
@include disable-outline;
display: inline-block;
position: relative;
border-radius: 3px;
overflow: hidden;
- width: $video-thumbnail-width;
- height: $video-thumbnail-height;
+ width: $width;
+ height: $height;
background-color: #ececec;
transition: filter $play-overlay-transition;
@@ -45,8 +45,8 @@ $play-overlay-width: 18px;
right: 0;
bottom: 0;
- width: $video-thumbnail-width;
- height: $video-thumbnail-height;
+ width: inherit;
+ height: inherit;
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
@@ -87,8 +87,8 @@ $play-overlay-width: 18px;
}
img {
- width: $video-thumbnail-width;
- height: $video-thumbnail-height;
+ width: inherit;
+ height: inherit;
&.blur-filter {
filter: blur(5px);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3eefdb6fb..7faeec6bd 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -515,3 +515,15 @@
align-items: center;
}
}
+
+@mixin dropdown-with-icon-item {
+ padding: 6px 24px;
+
+ my-global-icon {
+ width: 24px;
+
+ margin-right: 10px;
+ position: relative;
+ top: -2px;
+ }
+}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 6e502b028..6de145379 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -62,11 +62,9 @@ p-table {
tr {
&:hover {
background-color: var(--submenuColor) !important;
- }
- &:not(:hover) {
- .action-cell * {
- display: none !important;
+ .action-cell .dropdown-root {
+ display: block !important;
}
}
@@ -140,6 +138,14 @@ p-table {
padding: 0 !important;
text-align: center;
+ .dropdown-root {
+ display: none !important;
+
+ &.show {
+ display: block !important;
+ }
+ }
+
my-edit-button + my-delete-button {
margin-left: 5px;
}
diff --git a/shared/models/videos/video.model.ts b/shared/models/videos/video.model.ts
index 6e7a6831e..963268674 100644
--- a/shared/models/videos/video.model.ts
+++ b/shared/models/videos/video.model.ts
@@ -18,6 +18,12 @@ export interface VideoFile {
fps: number
}
+export interface PlaylistElement {
+ position: number
+ startTimestamp: number
+ stopTimestamp: number
+}
+
export interface Video {
id: number
uuid: string
@@ -55,11 +61,7 @@ export interface Video {
currentTime: number
}
- playlistElement?: {
- position: number
- startTimestamp: number
- stopTimestamp: number
- }
+ playlistElement?: PlaylistElement
}
export interface VideoDetails extends Video {