aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-tables
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-10-27 11:42:05 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-10-29 11:48:21 +0200
commit33f6dce136ca6e969fe374efa099bee3f2a3599d (patch)
tree7a0d6228bab085944015a01267ad31aa1ec6082e /client/src/app/shared/shared-tables
parent00004f7f6b966a975498612117212b5373f4103c (diff)
downloadPeerTube-33f6dce136ca6e969fe374efa099bee3f2a3599d.tar.gz
PeerTube-33f6dce136ca6e969fe374efa099bee3f2a3599d.tar.zst
PeerTube-33f6dce136ca6e969fe374efa099bee3f2a3599d.zip
Add videos list admin component
Diffstat (limited to 'client/src/app/shared/shared-tables')
-rw-r--r--client/src/app/shared/shared-tables/index.ts3
-rw-r--r--client/src/app/shared/shared-tables/shared-tables.module.ts25
-rw-r--r--client/src/app/shared/shared-tables/table-expander-icon.component.ts12
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.html19
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.scss74
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.ts15
6 files changed, 148 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-tables/index.ts b/client/src/app/shared/shared-tables/index.ts
new file mode 100644
index 000000000..e7b593257
--- /dev/null
+++ b/client/src/app/shared/shared-tables/index.ts
@@ -0,0 +1,3 @@
1export * from './table-expander-icon.component'
2export * from './video-cell.component'
3export * from './shared-tables.module'
diff --git a/client/src/app/shared/shared-tables/shared-tables.module.ts b/client/src/app/shared/shared-tables/shared-tables.module.ts
new file mode 100644
index 000000000..c528365a0
--- /dev/null
+++ b/client/src/app/shared/shared-tables/shared-tables.module.ts
@@ -0,0 +1,25 @@
1
2import { NgModule } from '@angular/core'
3import { SharedMainModule } from '../shared-main/shared-main.module'
4import { TableExpanderIconComponent } from './table-expander-icon.component'
5import { VideoCellComponent } from './video-cell.component'
6
7@NgModule({
8 imports: [
9 SharedMainModule
10 ],
11
12 declarations: [
13 VideoCellComponent,
14 TableExpanderIconComponent
15 ],
16
17 exports: [
18 VideoCellComponent,
19 TableExpanderIconComponent
20 ],
21
22 providers: [
23 ]
24})
25export class SharedTablesModule { }
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
new file mode 100644
index 000000000..3756b475a
--- /dev/null
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -0,0 +1,12 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-table-expander-icon',
5 template: `
6<span class="expander">
7 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
8</span>`
9})
10export class TableExpanderIconComponent {
11 @Input() expanded: boolean
12}
diff --git a/client/src/app/shared/shared-tables/video-cell.component.html b/client/src/app/shared/shared-tables/video-cell.component.html
new file mode 100644
index 000000000..fb7d852ab
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.html
@@ -0,0 +1,19 @@
1<a [href]="getVideoUrl()" class="table-video-link" [title]="video.name" target="_blank" rel="noopener noreferrer">
2 <div class="table-video">
3 <div class="table-video-image">
4 <img [src]="video.thumbnailPath">
5
6 <ng-content select="[image]"></ng-content>
7 </div>
8
9 <div class="table-video-text">
10 <div>
11 <ng-content select="[name]"></ng-content>
12
13 {{ video.name }}
14 </div>
15
16 <div class="text-muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div>
17 </div>
18 </div>
19</a>
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
new file mode 100644
index 000000000..7efb61502
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -0,0 +1,74 @@
1@use 'sass:math';
2@use '_mixins' as *;
3@use '_variables' as *;
4@use '_miniature' as *;
5
6.table-video-link {
7 @include disable-outline;
8
9 position: relative;
10 top: 3px;
11}
12
13.table-video {
14 display: inline-flex;
15
16 .table-video-image {
17 $image-height: 45px;
18
19 @include miniature-thumbnail;
20 @include margin-right(0.5rem);
21
22 height: $image-height;
23 width: #{math.div(16, 9) * $image-height};
24 border-radius: 2px;
25 border: 0;
26 background: transparent;
27 display: inline-flex;
28 justify-content: center;
29 position: relative;
30
31 img {
32 height: 100%;
33 width: 100%;
34 border-radius: 2px;
35 }
36
37 span {
38 color: pvar(--inputPlaceholderColor);
39 }
40
41 .table-video-image-label {
42 @include static-thumbnail-overlay;
43
44 position: absolute;
45 border-radius: 3px;
46 font-size: 10px;
47 padding: 0 3px;
48 line-height: 1.3;
49 bottom: 2px;
50 right: 2px;
51 }
52 }
53
54 .table-video-text {
55 display: inline-flex;
56 flex-direction: column;
57 justify-content: center;
58 font-size: 90%;
59 color: pvar(--mainForegroundColor);
60 line-height: 1rem;
61
62 div .glyphicon {
63 @include margin-left(0.1rem);
64
65 font-size: 80%;
66 color: #808080;
67 }
68
69 div + div {
70 color: var(--greyForegroundColor);
71 font-size: 11px;
72 }
73 }
74}
diff --git a/client/src/app/shared/shared-tables/video-cell.component.ts b/client/src/app/shared/shared-tables/video-cell.component.ts
new file mode 100644
index 000000000..62984180d
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.ts
@@ -0,0 +1,15 @@
1import { Component, Input } from '@angular/core'
2import { Video } from '@app/shared/shared-main'
3
4@Component({
5 selector: 'my-video-cell',
6 styleUrls: [ 'video-cell.component.scss' ],
7 templateUrl: 'video-cell.component.html'
8})
9export class VideoCellComponent {
10 @Input() video: Video
11
12 getVideoUrl () {
13 return Video.buildWatchUrl(this.video)
14 }
15}