Skip to content

Commit 453c0c0

Browse files
edoparearyeeedoparearyee
committed
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
1 parent 37a7f86 commit 453c0c0

28 files changed

+563
-160
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
/dist
55
/tmp
66
/out-tsc
7+
.ng_pkg_build
78

89
# dependencies
910
/node_modules

‎.travis.yml‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,3 @@ script:
1818
- npm run test -- --no-progress --code-coverage --single-run --browser=ChromeNoSandbox
1919
- npm run e2e -- --no-progress
2020
- npm run coverage
21-
addons:
22-
apt:
23-
sources:
24-
- google-chrome
25-
packages:
26-
- google-chrome-stable

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License
22

3-
Copyright (c) 2017 SOON London Ltd.
3+
Copyright (c) 2018 SOON London Ltd.
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎index.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
export { ImageLoaderModule } from './src/app/image-loader/image-loader.module';
2-
export { ImageLoaderComponent } from './src/app/image-loader/image-loader.component';
2+
export { ImageLoaderComponent } from './src/app/image-loader/image-loader/image-loader.component';
33
import { loadedClass, notLoadedClass } from './src/app/image-loader/shared/classes';
44
import { eventResize } from './src/app/image-loader/shared/events';
55
import { ResponsiveImage, RetinaImage, Size } from './src/app/image-loader/shared/image.model';
66
import { Breakpoint } from './src/app/image-loader/shared/breakpoint.model';
7+
8+
export { VideoLoaderComponent } from './src/app/video-loader/video-loader/video-loader.component';
9+
export { VideoLoaderModule } from './src/app/video-loader/video-loader.module';
10+
export { loadedClass, notLoadedClass } from './src/app/video-loader/shared/classes';
11+
export { ResponsiveVideo, Video } from './src/app/video-loader/shared/video.model';

‎package-lock.json‎

Lines changed: 11 additions & 83 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@thisissoon/angular-image-loader",
33
"version": "2.0.2",
4-
"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",
4+
"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",
55
"keywords": [
66
"angular",
77
"angular 5",
@@ -12,7 +12,10 @@
1212
"image",
1313
"progressive",
1414
"responsive",
15-
"lazy"
15+
"lazy",
16+
"video",
17+
"video loader",
18+
"responsive video"
1619
],
1720
"author": "SOON_ <dorks@thisissoon.com>",
1821
"contributors": [
@@ -25,8 +28,8 @@
2528
"url": "https://github.com/thisissoon/angular-image-loader"
2629
},
2730
"engines": {
28-
"node": ">= 6.9.0",
29-
"npm": ">= 3.0.0"
31+
"node": ">= 8.9.0",
32+
"npm": ">= 5.5.0"
3033
},
3134
"scripts": {
3235
"ng": "ng",

‎src/app/app-data.ts‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ResponsiveVideo } from './video-loader';
2+
import { ResponsiveImage, Breakpoint } from './image-loader';
3+
4+
export const image: ResponsiveImage = {
5+
placeholder: 'http://via.placeholder.com/40x40?text=placeholder',
6+
fallback: 'http://via.placeholder.com/400x400?text=fallback',
7+
images: [
8+
{
9+
size: 'xs',
10+
x1: 'http://via.placeholder.com/400x400?text=xs+1x',
11+
x2: 'http://via.placeholder.com/800x800?text=xs+2x'
12+
},
13+
{
14+
size: 'md',
15+
x1: 'http://via.placeholder.com/768x400?text=md+1x',
16+
x2: 'http://via.placeholder.com/1536x800?text=md+2x'
17+
},
18+
{
19+
size: 'lg',
20+
x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
21+
x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
22+
}
23+
]
24+
};
25+
26+
export const video: ResponsiveVideo = {
27+
// tslint:disable:max-line-length
28+
videos: [
29+
{
30+
size: 'xs',
31+
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'
32+
},
33+
{
34+
size: 'md',
35+
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'
36+
},
37+
{
38+
size: 'lg',
39+
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'
40+
}
41+
],
42+
poster: {
43+
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',
44+
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',
45+
images: [
46+
{
47+
size: 'xs',
48+
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',
49+
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'
50+
},
51+
{
52+
size: 'md',
53+
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',
54+
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'
55+
},
56+
{
57+
size: 'lg',
58+
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',
59+
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'
60+
}
61+
]
62+
}
63+
};
64+
// tslint:enable:max-line-length
65+
66+
67+
export const sizes: Breakpoint[] = [
68+
{ size: 'xs', width: 0 },
69+
{ size: 'md', width: 768 },
70+
{ size: 'lg', width: 992 },
71+
];

‎src/app/app.component.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,16 @@ <h3>Bottom image</h3>
2323
</sn-image-loader>
2424
<h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
2525
<div class="spacer"></div>
26+
27+
<sn-video-loader
28+
[sizes]="sizes"
29+
[video]="video"
30+
[loop]="true"
31+
[muted]="true"
32+
[autoplay]="true"
33+
[controls]="true"
34+
[playsInline]="true"
35+
type="video/mp4"
36+
videoClass="video"
37+
posterClass="img">
38+
</sn-video-loader>

‎src/app/app.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,7 @@
1919
:host ::ng-deep .sn-image-loaded .img {
2020
filter: blur(0px);
2121
}
22+
23+
:host ::ng-deep .video {
24+
width: 100%;
25+
}

‎src/app/app.component.ts‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,19 @@
11
import { Component } from '@angular/core';
2+
23
import { ResponsiveImage, Breakpoint, Size } from './image-loader';
34
import { ImageLoadedEvent } from './image-loader/shared';
5+
import { ResponsiveVideo } from './video-loader/shared';
6+
import { video, image, sizes } from './app-data';
47

58
@Component({
69
selector: 'sn-root',
710
templateUrl: './app.component.html',
811
styleUrls: ['./app.component.scss']
912
})
1013
export class AppComponent {
11-
sizes: Breakpoint[] = [
12-
{ size: 'xs', width: 0 },
13-
{ size: 'md', width: 768 },
14-
{ size: 'lg', width: 992 },
15-
];
16-
17-
image: ResponsiveImage = {
18-
placeholder: 'http://via.placeholder.com/40x40?text=placeholder',
19-
fallback: 'http://via.placeholder.com/400x400?text=fallback',
20-
images: [
21-
{
22-
size: 'xs',
23-
x1: 'http://via.placeholder.com/400x400?text=xs+1x',
24-
x2: 'http://via.placeholder.com/800x800?text=xs+2x'
25-
},
26-
{
27-
size: 'md',
28-
x1: 'http://via.placeholder.com/768x400?text=md+1x',
29-
x2: 'http://via.placeholder.com/1536x800?text=md+2x'
30-
},
31-
{
32-
size: 'lg',
33-
x1: 'http://via.placeholder.com/1024x400?text=lg+1x',
34-
x2: 'http://via.placeholder.com/2048x800?text=lg+2x'
35-
}
36-
]
37-
};
14+
sizes: Breakpoint[] = sizes;
15+
image: ResponsiveImage = image;
16+
video: ResponsiveVideo = video;
3817

3918
/**
4019
* Set to true on placeholder loaded event.
@@ -52,6 +31,7 @@ export class AppComponent {
5231
*/
5332
imageLoadedEventCount = 0;
5433

34+
5535
/**
5636
* Increments event count on each image loaded event.
5737
* Counter displayed in component template.

0 commit comments

Comments
 (0)