Improve playlist element style

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-video-playlists / my-account-video-playlist-elements.component.html

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index e2d09a36d575ea16732a471d88bf4abf8bc0d4de..284694b7fd1339d0049d008b8b3e6b5cad091761 100644 (file)
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -1,60 +1,25 @@
-<div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
+<div class="row">
 
-<div class="videos" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
-  <div *ngFor="let video of videos" class="video">
-    <div class="position">{{ video.playlistElement.position }}</div>
-
-    <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur(video)"></my-video-thumbnail>
-
-    <div class="video-info">
-      <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-      <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
-    </div>
-
-    <div class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()" autoClose="outside">
-      <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more"></my-global-icon>
-
-      <div ngbDropdownMenu>
-        <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
-          <my-global-icon iconName="edit"></my-global-icon> <ng-container i18n>Edit starts/stops at</ng-container>
-        </div>
-
-        <div class="timestamp-options" *ngIf="displayTimestampOptions">
-          <div>
-            <my-peertube-checkbox
-              inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
-              i18n-labelText labelText="Start at"
-            ></my-peertube-checkbox>
-
-            <my-timestamp-input
-              [timestamp]="timestampOptions.startTimestamp"
-              [maxTimestamp]="video.duration"
-              [disabled]="!timestampOptions.startTimestampEnabled"
-              [(ngModel)]="timestampOptions.startTimestamp"
-            ></my-timestamp-input>
-          </div>
-
-          <div>
-            <my-peertube-checkbox
-              inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
-              i18n-labelText labelText="Stop at"
-            ></my-peertube-checkbox>
-
-            <my-timestamp-input
-              [timestamp]="timestampOptions.stopTimestamp"
-              [maxTimestamp]="video.duration"
-              [disabled]="!timestampOptions.stopTimestampEnabled"
-              [(ngModel)]="timestampOptions.stopTimestamp"
-            ></my-timestamp-input>
-          </div>
-
-          <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
-        </div>
+  <div class="playlist-info col-xs-12 col-md-5 col-xl-3">
+    <my-video-playlist-miniature
+      *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
+      [displayDescription]="true" [displayPrivacy]="true"
+    ></my-video-playlist-miniature>
+  </div>
 
-        <span class="dropdown-item" (click)="removeFromPlaylist(video)">
-          <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container>
-        </span>
+  <div class="playlist-elements col-xs-12 col-md-7 col-xl-9">
+    <div i18n class="no-results" *ngIf="pagination.totalItems === 0">No videos in this playlist.</div>
+
+    <div
+      class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
+      cdkDropList (cdkDropListDropped)="drop($event)"
+    >
+      <div class="video" *ngFor="let video of videos; trackBy: trackByFn" cdkDrag (cdkDragMoved)="onDragMove($event)">
+        <my-video-playlist-element-miniature
+          [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
+          [position]="video.playlistElement.position"
+        >
+        </my-video-playlist-element-miniature>
       </div>
     </div>
   </div>