diff --git a/client/src/app/shared/shared-main/common/link.component.scss b/client/src/app/shared/shared-main/common/link.component.scss index d288afab1..433bf5a2c 100644 --- a/client/src/app/shared/shared-main/common/link.component.scss +++ b/client/src/app/shared/shared-main/common/link.component.scss @@ -1,6 +1,9 @@ -.inherit-parent { +.inherit-parent-style { color: inherit; text-decoration: inherit; +} + +.inherit-parent-dimension { position: inherit; width: inherit; height: inherit; diff --git a/client/src/app/shared/shared-main/common/link.component.ts b/client/src/app/shared/shared-main/common/link.component.ts index 0fe6d41c6..9ca2f72a9 100644 --- a/client/src/app/shared/shared-main/common/link.component.ts +++ b/client/src/app/shared/shared-main/common/link.component.ts @@ -1,5 +1,5 @@ import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common' -import { Component, Input, OnInit } from '@angular/core' +import { booleanAttribute, Component, Input, OnInit } from '@angular/core' import { RouterLink } from '@angular/router' import { GlobalIconComponent, GlobalIconName } from '@app/shared/shared-icons/global-icon.component' @@ -19,7 +19,8 @@ export class LinkComponent implements OnInit { @Input() title?: string @Input() className?: string - @Input() inheritParentCSS = false + @Input({ transform: booleanAttribute }) inheritParentStyle = false + @Input({ transform: booleanAttribute }) inheritParentDimension = false @Input() tabindex: string | number @@ -32,8 +33,12 @@ export class LinkComponent implements OnInit { ngOnInit () { this.builtClasses = this.className || '' - if (!this.builtClasses || this.inheritParentCSS) { - this.builtClasses += ' inherit-parent' + if (this.inheritParentStyle) { + this.builtClasses += ' inherit-parent-style' + } + + if (this.inheritParentDimension) { + this.builtClasses += ' inherit-parent-dimension' } } } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 20b11f8cc..60068eeb2 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -11,76 +11,80 @@ } -
-
-
- @if (displayOptions.avatar) { +
+
+ @if (displayOptions.avatar) { - @if (displayOwnerVideoChannel()) { - - } @else if (displayOwnerAccount()) { - - } + @if (displayOwnerVideoChannel()) { + + } @else if (displayOwnerAccount()) { + } + } - +
+ @if (displayOwnerAccount()) { {{ authorAccount }} } @else if (displayOwnerVideoChannel()) { {{ authorChannel }} } -
+ +
+
+ +
{{ video.name }} -
- - - - • - - - -
- -
- {{ video.privacy.label }} - - - {{ getStateLabel(video) }} -
- -
- - {{ playlist.playlistDisplayName }} - - - - Blocked - - {{ video.blacklistedReason }} - - - Sensitive +
+
-
- +
+ + + + • + + + +
+ +
+ {{ video.privacy.label }} + - + {{ getStateLabel(video) }} +
+ +
+ + {{ playlist.playlistDisplayName }} + + + + Blocked + - {{ video.blacklistedReason }} + + + Sensitive
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index 9f4e75473..bc1455fb7 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -10,6 +10,11 @@ $more-button-width: 40px; --co-fs-big: #{$miniature-fs-big}; } +.video-name-container { + display: flex; + min-width: 1px; +} + .video-name { font-size: var(--co-fs-big); @@ -36,18 +41,30 @@ $more-button-width: 40px; color: pvar(--fg-200); } +.owner-container { + display: flex; + min-width: 1px; +} + +my-actor-host { + max-width: 50%; +} + + .owner-label { - display: block; color: pvar(--fg-300); @include disable-default-a-behaviour; - @include ellipsis; &:hover { color: pvar(--fg); } } +my-actor-host { + @include margin-left(0.25rem); +} + .video-actions { width: $more-button-width; height: 30px; @@ -77,11 +94,6 @@ $more-button-width: 40px; } } -.video-bottom { - display: flex; - min-width: 1px; -} - // Grid mode // Takes all the width on mobile .video-miniature:not(.display-as-row) { @@ -90,7 +102,7 @@ $more-button-width: 40px; padding-bottom: 1rem; width: 100%; - .video-info { + .video-name { width: calc(100% - #{$more-button-width}); } @@ -100,11 +112,7 @@ $more-button-width: 40px; @include block-ratio($selector: '::ng-deep .video-thumbnail'); } - .video-bottom { - width: 100%; - } - - &.has-avatar .video-bottom { + &.has-avatar .video-info { @include padding-left(0.75rem); } @@ -126,7 +134,7 @@ $more-button-width: 40px; border-radius: 5px; } - & + .owner-label { + & + .owner-container { // Keep 34px in sync with the component @include margin-left(calc(0.5rem + 34px)); } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts index 3c2e8e5c2..46c0d69d6 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts @@ -26,6 +26,7 @@ import { VideoThumbnailComponent } from '../shared-thumbnail/video-thumbnail.com import { VideoPlaylistService } from '../shared-video-playlist/video-playlist.service' import { VideoViewsCounterComponent } from '../shared-video/video-views-counter.component' import { VideoActionsDisplayType, VideoActionsDropdownComponent } from './video-actions-dropdown.component' +import { ActorHostComponent } from '../standalone-actor/actor-host.component' export type MiniatureDisplayOptions = { date?: boolean @@ -56,7 +57,8 @@ export type MiniatureDisplayOptions = { VideoViewsCounterComponent, RouterLink, NgFor, - VideoActionsDropdownComponent + VideoActionsDropdownComponent, + ActorHostComponent ] }) export class VideoMiniatureComponent implements OnInit { @@ -134,13 +136,13 @@ export class VideoMiniatureComponent implements OnInit { get authorAccount () { return this.serverConfig.client.videos.miniature.preferAuthorDisplayName ? this.video.account.displayName - : this.video.byAccount + : this.video.account.name } get authorChannel () { return this.serverConfig.client.videos.miniature.preferAuthorDisplayName ? this.video.channel.displayName - : this.video.byVideoChannel + : this.video.channel.name } get isVideoBlur () { diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html index d0c6c8235..471044dcf 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html @@ -1,6 +1,6 @@
@@ -16,7 +16,7 @@
{{ playlist.displayName }} diff --git a/client/src/app/shared/standalone-actor/actor-host.component.html b/client/src/app/shared/standalone-actor/actor-host.component.html new file mode 100644 index 000000000..d17a980a7 --- /dev/null +++ b/client/src/app/shared/standalone-actor/actor-host.component.html @@ -0,0 +1,28 @@ +
+ + +
+ What is it? + +
+ This video comes from {{ host }} platform, to which we have subscribed. +
+ + Show all our subscriptions + + More {{ host }} content +
+
diff --git a/client/src/app/shared/standalone-actor/actor-host.component.scss b/client/src/app/shared/standalone-actor/actor-host.component.scss new file mode 100644 index 000000000..a89f72437 --- /dev/null +++ b/client/src/app/shared/standalone-actor/actor-host.component.scss @@ -0,0 +1,77 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.content { + background-color: pvar(--bg-secondary-500); + border-radius: 14px; + max-width: 350px; + border: 0; + + @include padding(1.5rem); +} + +.question { + color: pvar(--fg-350); + font-weight: $font-bold; + + @include font-size(20px); +} + +.secondary-button { + border-color: pvar(--secondary-icon-color) !important; +} + +.answer { + color: pvar(--fg-300); + + a { + color: pvar(--fg-400); + font-weight: $font-bold; + text-decoration: underline; + + my-global-icon { + color: pvar(--fg-400); + top: 0; + } + } +} + +.host { + position: relative; + max-width: 100%; + + &:hover { + opacity: 0.8; + } + + svg { + fill: pvar(--bg); + z-index: 2; + width: auto; + height: calc(100% + 2px);; + top: -1px; + position: absolute; + + &.left { + left: -2px; + } + + &.right { + right: -2px; + } + } +} + +.host { + color: pvar(--fg-450); + font-weight: $font-bold; + background: linear-gradient(to right, pvar(--bg-secondary-400), pvar(--bg-secondary-500)); + position: relative; + padding: 4px 12px; + + @include font-size(10px); + + &::after { + display: none; + } +} diff --git a/client/src/app/shared/standalone-actor/actor-host.component.ts b/client/src/app/shared/standalone-actor/actor-host.component.ts new file mode 100644 index 000000000..7f4bf3d99 --- /dev/null +++ b/client/src/app/shared/standalone-actor/actor-host.component.ts @@ -0,0 +1,17 @@ +import { CommonModule } from '@angular/common' +import { Component, Input } from '@angular/core' +import { RouterLink } from '@angular/router' +import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap' +import { GlobalIconComponent } from '../shared-icons/global-icon.component' +import { ButtonComponent } from '../shared-main/buttons/button.component' + +@Component({ + selector: 'my-actor-host', + templateUrl: 'actor-host.component.html', + styleUrls: [ 'actor-host.component.scss' ], + standalone: true, + imports: [ CommonModule, NgbDropdownModule, GlobalIconComponent, ButtonComponent, RouterLink ] +}) +export class ActorHostComponent { + @Input({ required: true }) host: string +} diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 0a7b21506..7b3d04e29 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -241,10 +241,11 @@ code { a { color: inherit; +} - &:hover { - opacity: 0.8; - } +my-link:hover, +a:hover { + opacity: 0.8; } .main-col {