2.2 - Sort playlist by drag and drop

Author: quead

README.md

@@ -7,7 +7,7 @@
 </p>
 
 # About Player
-[![Version](https://img.shields.io/badge/Current%20version-v2.1-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
+[![Version](https://img.shields.io/badge/Current%20version-v2.2-brightgreen.svg?style=flat)](https://github.com/quead/angular2-yt-player)
 [![Build Status](https://semaphoreci.com/api/v1/quead/angular2-yt-player/branches/master/badge.svg)](https://semaphoreci.com/quead/angular2-yt-player)
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/quead/angular2-yt-player/master/LICENSE)
@@ -79,26 +79,29 @@ or
 <a href="https://youtu.be/KB803dWQM-o/" title="Video Presentation">Video Presentation</a>
 
 ## Changelog
-Angular2 YT Player v2.1
+Angular YouTube Player 2.2
+- Sort playlist by drag and drop (used [ng2-dragula](https://valor-software.com/ng2-dragula/ "NG2 Dragula"))
+
+Angular YT Player v2.1
 - Categories with videos like (music, gaming, autos, films, sports, etc.)
 - Refactoring code
 - Search on specific region
 - Fixing copy link for featured video
 - UX improvements
 
-Angular2 YT Player v2.0.1
+Angular YouTube Player 2.0.1
 - Import & export youtube playlist as .JSON file
 
-Angular2 YT Player v2.0
+Angular YouTube Player 2.0
 - Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
 - Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
 - Auto updating the app (desktop version)
 
-Angular2 YT Player v1.9.2
+Angular YouTube Player 1.9.2
 - UX improvements and fixes
 - Preparing files for 2.0
 
-Angular2 YT Player v1.9.1
+Angular YouTube Player 1.9.1
 - Get settings.json for localstorage if your localstorage is empty
 - The playlist automatically saving, if is empty it will be populated with related videos
 - Toggle light/dark theme mode
@@ -108,31 +111,31 @@ Angular2 YT Player v1.9.1
 - Manual saving for external settings (check settings)
 - Performance, UI and UX improvements and fixes
 
-Angular2 YT Player v1.9
+Angular YouTube Player 1.9
 - Add/remove items from playlist, first time when is initialized It is prepopulated with related videos
 - Next/prev video from your playlist
 - Moved history to separate page
 - Adding toggle video, repeat mode and list & grid on trending to settings.json
 - Small fixes
 
-Angular2 YT Player v1.7
+Angular YouTube Player 1.7
 - Added featured video as first video from trending
 - Notifications for important actions you do
 - Removed debugging mode
 - Preparing packages, code and files for v2.0
 - Improved UI/UX for lists
 
-Angular2 YT Player v1.6
+Angular YouTube Player 1.6
 - Video details for current video and trending videos like number of views, likes and dislikes
 - Share link for current video
 - Added new setting for hiding all thumbnails
 - Custom player buttons shows now only when you hide video
 
-Angular2 YT Player v1.4
+Angular YouTube Player 1.4
 - History of your watched videos
 - Small fixes
 
-Angular2 YT Player v1.3
+Angular YouTube Player 1.3
  - Show/hide video player
  - Repeat video
  - Grid/list mode for trending videos
@@ -142,15 +145,15 @@ Angular2 YT Player v1.3
 - *YOUR_API Key*
 - *Max related videos (0 to 50)*
 
-Angular2 YT Player v1.2
+Angular YouTube Player 1.2
 - Introducing trending videos, currently default trending videos are from United States
 - Refactoring the code
 - Adding routes for future components which it will show in left navbar
 - Default video will be first from trending videos
 - Adding the video player
 - Update the design to match the new features
 
-Angular2 YT Player v1.1
+Angular YouTube Player 1.1
 - Adding mute/unmute functionality
 - Improved user interface and user experience
 - Adding settings functionality, the settings will get from ***assets/settings.json***
@@ -159,11 +162,11 @@ Angular2 YT Player v1.1
 - *Show/hide thumbnails in search*
 
 
-Angular2 YT Player v1.0.2
+Angular YouTube Player 1.0.2
 - Change volume on your video
 - Related videos
 
-Angular2 YT Player v1.0.0
+Angular YouTube Player 1.0.0
 - Search and play video from youtube
 - Play/pause video
 - Change time of your video that you want to listen
@@ -177,16 +180,14 @@ Angular2 YT Player v1.0.0
 - *Room chat **(unversioned)***
 
 #### Roadmap to 3.0
-- Drag and drop videos to playlist **(in v2.2)**
-- Arrange playlist by drag and drop **(in v2.2)**
 - Integrating Google accounts **(in v2.4)**
 - Integrating firebase **(in v2.5)**
 
 - **Rooms**
-- *Create room where you can watch videos with others in sync by sharing the room link **(in v3.0)***
-- *Set private/public room **(in v3.0)***
-- *List of public rooms **(in v3.0)***
-- *Room moderators which can add videos, kick roommates, mute roommates, rename room title and description **(in v3.3)***
+- *Create room where you can watch videos with others in sync by sharing the room link **(in v2.7)***
+- *Set private/public room **(in v2.7)***
+- *List of public rooms **(in v2.8)***
+- *Room moderators which can add videos, kick roommates, mute roommates, rename room title and description **(in v2.9)***
 
 ## Copyright and License
 Copyright [quead](https://github.com/quead) under the [MIT license](LICENSE).

package.json

@@ -24,6 +24,7 @@
     "@types/youtube": "0.0.31",
     "child_process": "^1.0.2",
     "core-js": "^2.4.1",
+    "ng2-dragula": "^1.5.0",
     "ngx-youtube-player": "0.0.41",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"

src/app/app.component.html

@@ -47,7 +47,7 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
                     <button type="button" class="video-item-head-btn" (click)="clearPlaylist()"><span class="fa fa-close"></span>clear</button>
                     <button type="button" class="video-item-head-btn" (click)="exportPlaylist()"><span class="fa fa-cog"></span>manage</button>
                 </div>
-                <div class="playlist-video-content" #playlistContainer>
+                <div class="playlist-video-content" [dragula]='"playlistDrag"' [dragulaModel]='playlistVideos' #playlistContainer>
                   <div *ngIf="playlistVideos.length === 0" class="video-list-info">
                     Empty playlist
                   </div>

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { YoutubeGetVideo } from './shared/youtube.service';
 import { SharedService } from './shared/lists.service';
 import { NwjsService } from './shared/nwjs.service';
 import { Event } from '@angular/router/src/events';
+import { DragulaService } from 'ng2-dragula/ng2-dragula';
 
 import { IRelatedVideo } from './models/related-video.model';
 import { INotify } from './models/notify.model';
@@ -81,11 +82,31 @@ export class AppComponent implements OnInit {
   constructor(
     private youtube: YoutubeGetVideo,
     private shared: SharedService,
-    private nwjs: NwjsService
+    private nwjs: NwjsService,
+    private dragula: DragulaService
   ) {
     this._shared = shared;
     this._nwjs = nwjs;
     this.notify = this._shared.notify;
+    dragula.setOptions('playlistVideos', {
+      moves: (el, container, handle) => {
+        return handle.className === 'video-item-settings';
+      }
+    });
+    dragula.over.subscribe((value) => {
+      const [e, el, container] = value.slice(1);
+      this.addClass(el, 'ex-over');
+    });
+    dragula.out.subscribe((value) => {
+      const [e, el, container] = value.slice(1);
+      this.removeClass(el, 'ex-over');
+      this.updatePlaylist();
+    });
+    dragula.drop.subscribe((value) => {
+      const [e, el, container] = value.slice(1);
+      this.removeClass(el, 'ex-over');
+      this.updatePlaylist();
+    });
   }
 
   ngOnInit() {
@@ -103,6 +124,22 @@ export class AppComponent implements OnInit {
       this.getFeedVideos();
   }
 
+  private hasClass(el: any, name: string) {
+    return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className);
+  }
+
+  private addClass(el: any, name: string) {
+    if (!this.hasClass(el, name)) {
+      el.className = el.className ? [el.className, name].join(' ') : name;
+    }
+  }
+
+  private removeClass(el: any, name: string) {
+    if (this.hasClass(el, name)) {
+      el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), '');
+    }
+  }
+
   // ---------------- Init player ----------------
 
   savePlayer(player) {
@@ -205,6 +242,12 @@ export class AppComponent implements OnInit {
 
   // ---------------- Playlist settings ----------------
 
+  updatePlaylist() {
+    this.findPlaylistItem();
+    this._shared.playlist = this.playlistVideos;
+    this._shared.updatePlaylist();
+  }
+
   uploadPlaylist(event: Event) {
     const files = event['target'].files[0];
     if (files.length <= 0) {
@@ -273,11 +316,7 @@ export class AppComponent implements OnInit {
           this.currentPlaylistItem = -1;
         }
         this.playlistVideos.splice(i, 1);
-
-        this._shared.playlist.splice(i, 1);
-        this._shared.updatePlaylist();
-
-        this.findPlaylistItem();
+        this.updatePlaylist();
       }, 200);
   }
 
@@ -300,6 +339,8 @@ export class AppComponent implements OnInit {
         listType = this._shared.historyVideos[i];
       }
 
+      console.log(listType);
+
       if (typeof listType.id.videoId !== 'undefined') {
         playlistItem = this.playlistVideos.find(item => item.id.videoId === listType.id.videoId);
       } else {
@@ -308,11 +349,8 @@ export class AppComponent implements OnInit {
 
       if (typeof playlistItem === 'undefined') {
         this.playlistVideos.push(listType);
+        this.updatePlaylist();
 
-        this._shared.playlist.push(listType);
-        this._shared.updatePlaylist();
-
-        this.findPlaylistItem();
         this._shared.triggerNotify('Added to playlist');
         this.updateNotify();
         this.scrollToBottom();

src/app/app.module.ts

@@ -5,6 +5,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { routes } from './app.router';
 
+import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+
 import { AppComponent } from './app.component';
 import { SharedService } from './shared/lists.service';
 import { NwjsService } from './shared/nwjs.service';
@@ -24,6 +26,7 @@ import { CategoryComponent } from './components/category/category.component';
     ReactiveFormsModule,
     YoutubePlayerModule,
     FormsModule,
+    DragulaModule,
     routes
   ],
   declarations: [

src/app/components/youtube-about.component.html

@@ -2,7 +2,7 @@
     <h2>About</h2>
 </div>
 <div class="app-content">
-    <p>This is a simple youtube web player and desktop player based on angular-cli 1.4, NWjs 0.25.2, ng2-youtube-player 0.0.3 (used for youtube iFrame API), SCSS (CSS3), HTML5 and webkit functions.</p>
+    <p>This is a simple youtube web player and desktop player based on angular-cli 1.4, NWjs 0.25.2, ngx-youtube-player 0.1.0 (used for youtube iFrame API), SCSS (CSS3), HTML5 and webkit functions.</p>
     <p>This player is compatible only with Chrome/webkit browsers.</p>
     <p>The project status is beta.</p>
 </div>

src/assets/scss/_global.scss

@@ -16,7 +16,6 @@ body {
     font-weight: 400;    
     font-size: $f-14;
     line-height: 1.5;
-    user-select: none;
     margin: 0;
     padding: 0;
     cursor: default;

src/assets/scss/_videos.scss

@@ -238,6 +238,28 @@ iframe {
     }
 }
 
+.gu-transit {
+    background-color: #c72020 !important;
+    .video-item-hint {
+        color: var(--c-white);
+        border-color: var(--c-white);
+    }
+}
+
+.ex-over {
+    background-color: rgba(255, 255, 255, 0.01) !important;
+    border: 2px dashed rgba(255, 255, 255, 0.2) !important;
+    .video-item:hover {
+        .video-item-image {
+            transform: scale(1);
+        }
+        .video-item-settings {
+            opacity: 0;
+            visibility: hidden;
+        }
+    }
+}
+
 #related-video-list {
     display: flex;
     flex-wrap: wrap;
@@ -294,6 +316,13 @@ iframe {
         overflow: auto;
         background-color: var(--c-dark-gray);
         z-index: 0;
+        border: 0 dashed transparent;
+        transition: all 0.2s ease-out;
+        .video-item-settings {
+            cursor: grab;
+            cursor: -moz-grab;
+            cursor: -webkit-grab;
+        }
         .video-item:not(.active) {
             background-color: transparent;
         }

src/index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <base href="/">
-        <title>YouTube Player v2.1</title>
+        <title>YouTube Player v2.2</title>
         <link rel="icon" href="favicon.ico">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">