preview video audio photo

angular.json

@@ -37,6 +37,9 @@
               },
               {
                 "input": "src/styles.scss"
+              },
+              {
+                "input": "node_modules/videogular2/fonts/videogular.css"
               }
             ],
             "scripts": [{

package-lock.json

@@ -15100,6 +15100,11 @@
         }
       }
     },
+    "videogular2": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/videogular2/-/videogular2-6.1.1.tgz",
+      "integrity": "sha1-3xywim+4pw8sbGSecCxN4B90onw="
+    },
     "vinyl": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",

package.json

@@ -55,6 +55,7 @@
     "screenfull": "3.3.x",
     "serve-favicon": "^2.4.5",
     "smoothscroll-polyfill": "0.3.x",
+    "videogular2": "^6.1.1",
     "web-animations-js": "2.3.x",
     "zone.js": "0.8.x"
   },

src/app/app.module.ts

@@ -18,6 +18,15 @@ import { BookComponent } from './book/book.component';
 import { RouterModule, Routes } from '@angular/router';
 import { MainComponent } from './main/main.component';
 
+
+import {VgCoreModule} from 'videogular2/core';
+import {VgControlsModule} from 'videogular2/controls';
+import {VgOverlayPlayModule} from 'videogular2/overlay-play';
+import {VgBufferingModule} from 'videogular2/buffering';
+// import {SingleMediaPlayer} from './single-media-player';
+
+
+
 const appRoutes: Routes = [
     {
         path: 'main',
@@ -55,6 +64,10 @@ const appRoutes: Routes = [
   ],
   imports: [
     BrowserModule,
+    VgCoreModule,
+    VgControlsModule,
+    VgOverlayPlayModule,
+    VgBufferingModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,

src/app/book/book.component.html

@@ -89,15 +89,43 @@
           <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
         </div>
         <div *ngIf="file.extention === ('video/mp4')">
-          <i class="fa fa-file-movie-o" aria-hidden="true"></i>
+            <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
+            <vg-player style="height: 200px; width: 200px">
+                <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
+                    <source src="../../../public/{{ file._id.toString() }}" type="video/mp4">
+                </video>
+            </vg-player>
         </div>
         <div *ngIf="file.extention === ('text/plain')">
           <i class="fa fa-file-text-o" aria-hidden="true"></i>
+          <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>-->
         </div>
         <div *ngIf="file.extention === ('audio/mpeg')">
-          <i class="fa fa-file-audio-o" aria-hidden="true"></i>
+            <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
+            <vg-player style="height: 50px; width: 400px">
+                <vg-controls>
+                    <vg-play-pause></vg-play-pause>
+                    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
+
+                    <vg-scrub-bar>
+                        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
+                    </vg-scrub-bar>
+
+                    <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
+                    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
+
+                    <vg-mute></vg-mute>
+
+                    <vg-fullscreen></vg-fullscreen>
+                </vg-controls>
+
+                <audio #media [vgMedia]="media" id="myAudio" preload="auto">
+                    <source src="../../../public/{{ file._id.toString() }}" type="audio/mp3">
+                </audio>
+            </vg-player>
         </div>
       </tr>
 
       </tbody>
-    </table>
+    </table>

src/app/book/book.component.ts

@@ -7,6 +7,7 @@ import { of } from 'rxjs/observable/of';
 import {Http} from "@angular/http";
 import {Form} from "@angular/forms";
 import * as formData from 'form-data';
+import {forEach} from '@angular/router/src/utils/collection';
 
 @Component({
   selector: 'app-book',
@@ -29,6 +30,7 @@ export class BookComponent implements OnInit, OnDestroy {
     this.isClickCreateFolder = false;
     this.fileChooseName = 'None';
     this.filesToUpload = [];
+
   }
 
   ngOnInit() {
@@ -75,9 +77,27 @@ export class BookComponent implements OnInit, OnDestroy {
     }
 
   getfiles() {
+      //var preview = document.querySelector('img');
+
+
+
       this.http.post('/api/getFileList', {mainPath : this.mainFolder.path, owner: this.currentUser.username.toString()}).subscribe(files => {
           if (files) {
               this.allUserFile = files;
+              /*
+              for (let f of this.allUserFile) {
+                  console.log('f.extention : ' + f.extention);
+                  if (f.extention === ('text/plain')) {
+                      this.reader = new FileReader();
+                      let contenido;
+                      console.log('ffff : ' + JSON.stringify(f));
+                      this.reader.onload = (e) => {
+                          contenido = this.reader.result;
+                          console.log('contenido : ' + contenido);
+                      };
+                      this.reader.readAsText(f);
+                  }
+              } */
           } else {
               this.allUserFile = [];
           }