feat(VideoLoader): adding Video loader module for responsive videos

Adding VideoLoader module to lazy load responsive videos like the Imageloader module but without the
placeholder and retina logic

Author: edoparearyee

.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+.ng_pkg_build
 
 # dependencies
 /node_modules

.travis.yml

@@ -18,9 +18,3 @@ script:
   - npm run test -- --no-progress --code-coverage --single-run --browser=ChromeNoSandbox
   - npm run e2e -- --no-progress
   - npm run coverage
-addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2017 SOON London Ltd.
+Copyright (c) 2018 SOON London Ltd.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

index.ts

@@ -1,6 +1,11 @@
 export { ImageLoaderModule } from './src/app/image-loader/image-loader.module';
-export { ImageLoaderComponent } from './src/app/image-loader/image-loader.component';
+export { ImageLoaderComponent } from './src/app/image-loader/image-loader/image-loader.component';
 import { loadedClass, notLoadedClass } from './src/app/image-loader/shared/classes';
 import { eventResize } from './src/app/image-loader/shared/events';
 import { ResponsiveImage, RetinaImage, Size } from './src/app/image-loader/shared/image.model';
 import { Breakpoint } from './src/app/image-loader/shared/breakpoint.model';
+
+export { VideoLoaderComponent } from './src/app/video-loader/video-loader/video-loader.component';
+export { VideoLoaderModule } from './src/app/video-loader/video-loader.module';
+export { loadedClass, notLoadedClass } from './src/app/video-loader/shared/classes';
+export { ResponsiveVideo, Video } from './src/app/video-loader/shared/video.model';

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@thisissoon/angular-image-loader",
   "version": "2.0.2",
-  "description": "A simple progressive/responsive/lazy loading image library for Angular that detects browser size and loads the appropriate image only when the element is in view. This package requires @thisissoon/angular-inviewport",
+  "description": "A simple progressive, responsive, lazy  image and video loading library for Angular that detects browser size and loads the appropriate image or video only when the element is in viewport. This package requires @thisissoon/angular-inviewport",
   "keywords": [
     "angular",
     "angular 5",
@@ -12,7 +12,10 @@
     "image",
     "progressive",
     "responsive",
-    "lazy"
+    "lazy",
+    "video",
+    "video loader",
+    "responsive video"
   ],
   "author": "SOON_ <dorks@thisissoon.com>",
   "contributors": [
@@ -25,8 +28,8 @@
     "url": "https://github.com/thisissoon/angular-image-loader"
   },
   "engines": {
-    "node": ">= 6.9.0",
-    "npm": ">= 3.0.0"
+    "node": ">= 8.9.0",
+    "npm": ">= 5.5.0"
   },
   "scripts": {
     "ng": "ng",

package.json

@@ -0,0 +1,71 @@
+import { ResponsiveVideo } from './video-loader';
+import { ResponsiveImage, Breakpoint } from './image-loader';
+
+export const image: ResponsiveImage = {
+  placeholder: 'http://via.placeholder.com/40x40?text=placeholder',
+  fallback: 'http://via.placeholder.com/400x400?text=fallback',
+  images: [
+    {
+      size: 'xs',
+      x1: 'http://via.placeholder.com/400x400?text=xs+1x',
+      x2: 'http://via.placeholder.com/800x800?text=xs+2x'
+    },
+    {
+      size: 'md',
+      x1: 'http://via.placeholder.com/768x400?text=md+1x',
+      x2: 'http://via.placeholder.com/1536x800?text=md+2x'
+    },
+    {
+      size: 'lg',
+      x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
+      x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
+    }
+  ]
+};
+
+export const video: ResponsiveVideo = {
+  // tslint:disable:max-line-length
+  videos: [
+    {
+      size: 'xs',
+      url: 'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_568,q_80,w_320/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
+    },
+    {
+      size: 'md',
+      url: 'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_1024,q_80,w_768/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
+    },
+    {
+      size: 'lg',
+      url: 'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_720,q_80,w_1280/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
+    }
+  ],
+  poster: {
+    placeholder: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_56,q_1,w_32/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg',
+    fallback: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_568,q_80,w_320/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg',
+    images: [
+      {
+        size: 'xs',
+        x1: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_568,q_80,w_320/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg',
+        x2: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_1136,q_80,w_640/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg'
+      },
+      {
+        size: 'md',
+        x1: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_768,q_80,w_1024/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg',
+        x2: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_1536,q_80,w_2048/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg'
+      },
+      {
+        size: 'lg',
+        x1: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_768,q_80,w_1280/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg',
+        x2: 'http://res.cloudinary.com/thisissoon/image/upload/c_fill,h_1536,q_80,w_2560/v1517616811/demos/jellyfish-25-mbps-hd-hevc_lpnffm.jpg'
+      }
+    ]
+  }
+};
+// tslint:enable:max-line-length
+
+
+export const sizes: Breakpoint[] = [
+  { size: 'xs', width: 0 },
+  { size: 'md', width: 768 },
+  { size: 'lg', width: 992 },
+];

src/app/app-data.ts

@@ -23,3 +23,16 @@ <h3>Bottom image</h3>
 </sn-image-loader>
 <h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
 <div class="spacer"></div>
+
+<sn-video-loader
+  [sizes]="sizes"
+  [video]="video"
+  [loop]="true"
+  [muted]="true"
+  [autoplay]="true"
+  [controls]="true"
+  [playsInline]="true"
+  type="video/mp4"
+  videoClass="video"
+  posterClass="img">
+</sn-video-loader>

src/app/app.component.html

@@ -19,3 +19,7 @@
 :host ::ng-deep .sn-image-loaded .img {
   filter: blur(0px);
 }
+
+:host ::ng-deep .video {
+  width: 100%;
+}

src/app/app.component.scss

@@ -1,40 +1,19 @@
 import { Component } from '@angular/core';
+
 import { ResponsiveImage, Breakpoint, Size } from './image-loader';
 import { ImageLoadedEvent } from './image-loader/shared';
+import { ResponsiveVideo } from './video-loader/shared';
+import { video, image, sizes } from './app-data';
 
 @Component({
   selector: 'sn-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  sizes: Breakpoint[] = [
-    { size: 'xs', width: 0 },
-    { size: 'md', width: 768 },
-    { size: 'lg', width: 992 },
-  ];
-
-  image: ResponsiveImage = {
-    placeholder: 'http://via.placeholder.com/40x40?text=placeholder',
-    fallback: 'http://via.placeholder.com/400x400?text=fallback',
-    images: [
-      {
-        size: 'xs',
-        x1: 'http://via.placeholder.com/400x400?text=xs+1x',
-        x2: 'http://via.placeholder.com/800x800?text=xs+2x'
-      },
-      {
-        size: 'md',
-        x1: 'http://via.placeholder.com/768x400?text=md+1x',
-        x2: 'http://via.placeholder.com/1536x800?text=md+2x'
-      },
-      {
-        size: 'lg',
-        x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
-        x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
-      }
-    ]
-  };
+  sizes: Breakpoint[] = sizes;
+  image: ResponsiveImage = image;
+  video: ResponsiveVideo = video;
 
   /**
    * Set to true on placeholder loaded event.
@@ -52,6 +31,7 @@ export class AppComponent {
    */
   imageLoadedEventCount = 0;
 
+
   /**
    * Increments event count on each image loaded event.
    * Counter displayed in component template.