├── src ├── assets │ └── .gitkeep ├── app │ ├── index.ts │ ├── components │ │ ├── vb-drop │ │ │ ├── vb-drop.html │ │ │ ├── vb-drop.css │ │ │ └── vb-drop.ts │ │ ├── vb-captions │ │ │ ├── vb-captions.html │ │ │ ├── vb-captions.css │ │ │ └── vb-captions.ts │ │ ├── vb-scroll │ │ │ └── vb-scroll.ts │ │ └── vb-video │ │ │ ├── vb-video.css │ │ │ ├── vb-video.html │ │ │ └── vb-video.ts │ ├── app.component.css │ ├── app.module.ts │ ├── app.component.ts │ ├── app.component.spec.ts │ ├── app.component.html │ └── services │ │ └── subtitles-parser.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── typings.d.ts ├── index.html ├── main.ts ├── tsconfig.json ├── styles.css ├── polyfills.ts └── test.ts ├── CNAME ├── e2e ├── app.po.ts ├── app.e2e-spec.ts └── tsconfig.json ├── README.md ├── .editorconfig ├── .gitignore ├── protractor.conf.js ├── karma.conf.js ├── angular-cli.json ├── package.json └── tslint.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | video.fluentcards.com -------------------------------------------------------------------------------- /src/app/index.ts: -------------------------------------------------------------------------------- 1 | export * from './app.component'; 2 | export * from './app.module'; 3 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/katspaugh/videobook/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | // Typings reference file, you can add your own global typings here 2 | // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html 3 | 4 | declare var System: any; 5 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class VideobookPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Videobook 2 | ========= 3 | 4 | An HTML5 video player with navigable subtitles. 5 | Works in Chrome, Safari and Firefox (50+). 6 | 7 | Demo: http://katspaugh.github.io/videobook 8 | 9 | ![Imgur](http://i.imgur.com/ucCcJ10.png) 10 | 11 | Slick UI design by [@hmprk](https://github.com/hmprk) 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = 0 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/app/components/vb-drop/vb-drop.html: -------------------------------------------------------------------------------- 1 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Videobook 7 | 8 | 9 | 10 |
Loading...
 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/components/vb-drop/vb-drop.css: -------------------------------------------------------------------------------- 1 | .vb-drop { 2 | width: 100%; 3 | height: 100%; 4 | background-color: #00ADEA; 5 | transition: background-color 100ms ease-out; 6 | } 7 | 8 | .vb-drop_dragover { 9 | background-color: #0084D4; 10 | } 11 | 12 | .vb-drop__content { 13 | height: 100%; 14 | } 15 | 16 | .vb-drop_dragover { 17 | opacity: 0.4; 18 | } 19 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { VideobookPage } from './app.po'; 2 | 3 | describe('ng2-videobook App', function() { 4 | let page: VideobookPage; 5 | 6 | beforeEach(() => { 7 | page = new VideobookPage(); 8 | }); 9 | 10 | it('should display message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual(''); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import './polyfills.ts'; 2 | 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | import { enableProdMode } from '@angular/core'; 5 | import { environment } from './environments/environment'; 6 | import { AppModule } from './app/'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | platformBrowserDynamic().bootstrapModule(AppModule); 13 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "module": "commonjs", 8 | "moduleResolution": "node", 9 | "outDir": "../dist/out-tsc-e2e", 10 | "sourceMap": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "../node_modules/@types" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": false, 4 | "emitDecoratorMetadata": true, 5 | "experimentalDecorators": true, 6 | "lib": ["es6", "dom"], 7 | "mapRoot": "./", 8 | "module": "es6", 9 | "moduleResolution": "node", 10 | "outDir": "../dist/out-tsc", 11 | "sourceMap": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "../node_modules/@types" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/components/vb-captions/vb-captions.html: -------------------------------------------------------------------------------- 1 |
2 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color: #00ADEA; 3 | color: #fff; 4 | margin: 0; 5 | padding: 0; 6 | font-family: Hevetica, sans-serif; 7 | font-size: 16px; 8 | height: 100%; 9 | overflow: hidden; 10 | } 11 | 12 | .hint { 13 | font-size: 22px; 14 | letter-spacing: 1.1px; 15 | word-spacing: 0.05em; 16 | line-height: 1.5; 17 | font-weight: normal; 18 | position: absolute; 19 | top: 20%; 20 | left: 50%; 21 | transform: translate(-50%, -50%); 22 | max-width: 600px; 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # IDEs and editors 12 | /.idea 13 | /.vscode 14 | .project 15 | .classpath 16 | *.launch 17 | .settings/ 18 | 19 | # misc 20 | /.sass-cache 21 | /connect.lock 22 | /coverage/* 23 | /libpeerconnection.log 24 | npm-debug.log 25 | testem.log 26 | /typings 27 | 28 | # e2e 29 | /e2e/*.js 30 | /e2e/*.map 31 | 32 | #System Files 33 | .DS_Store 34 | Thumbs.db 35 | -------------------------------------------------------------------------------- /src/app/components/vb-scroll/vb-scroll.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input } from '@angular/core'; 2 | 3 | @Directive({ selector: '[vbScroll]' }) 4 | export class VbScroll { 5 | private el; 6 | 7 | constructor(el: ElementRef) { 8 | this.el = el.nativeElement; 9 | } 10 | 11 | @Input('vbScroll') 12 | set isActive(toggle) { 13 | toggle && this.scroll(); 14 | } 15 | 16 | scroll() { 17 | this.el.scrollIntoViewIfNeeded ? 18 | this.el.scrollIntoViewIfNeeded() : 19 | this.el.scrollIntoView({ behavior: 'smooth' }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .home { 2 | height: 100%; 3 | } 4 | 5 | .home__container { 6 | height: 100%; 7 | width: 100%; 8 | overflow: hidden; 9 | display: flex; 10 | flex-flow: row nowrap; 11 | position: relative; 12 | } 13 | 14 | .home__title { 15 | font-size: 1em; 16 | font-weight: normal; 17 | margin: 1em; 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | } 22 | 23 | .home__main { 24 | flex: 1 80%; 25 | position: relative; 26 | } 27 | 28 | .home__aside { 29 | flex: 1 20%; 30 | height: 100%; 31 | overflow: hidden; 32 | position: relative; 33 | } 34 | 35 | .home__captions { 36 | height: 100%; 37 | } 38 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | // This file includes polyfills needed by Angular 2 and is loaded before 2 | // the app. You can add your own extra polyfills to this file. 3 | import 'core-js/es6/symbol'; 4 | import 'core-js/es6/object'; 5 | import 'core-js/es6/function'; 6 | import 'core-js/es6/parse-int'; 7 | import 'core-js/es6/parse-float'; 8 | import 'core-js/es6/number'; 9 | import 'core-js/es6/math'; 10 | import 'core-js/es6/string'; 11 | import 'core-js/es6/date'; 12 | import 'core-js/es6/array'; 13 | import 'core-js/es6/regexp'; 14 | import 'core-js/es6/map'; 15 | import 'core-js/es6/set'; 16 | import 'core-js/es6/reflect'; 17 | 18 | import 'core-js/es7/reflect'; 19 | import 'zone.js/dist/zone'; 20 | -------------------------------------------------------------------------------- /src/app/components/vb-video/vb-video.css: -------------------------------------------------------------------------------- 1 | .vb-video { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | 6 | .vb-video__element { 7 | width: 100%; 8 | display: block; 9 | margin: 0; 10 | } 11 | 12 | .vb-video__cc { 13 | font-size: 2.5vw; 14 | text-align: center; 15 | position: fixed; 16 | padding: 30px 3%; 17 | left: 0; 18 | right: 20%; 19 | bottom: 0; 20 | z-index: 2; 21 | text-shadow: 1px 1px #000, -1px -1px #000, 0 0 2px #000; 22 | } 23 | 24 | /* Hide browser's built-in subtitles */ 25 | .vb-video ::cue { 26 | visibility: hidden; 27 | color: transparent; 28 | } 29 | 30 | .vb-video ::-webkit-media-controls-toggle-closed-captions-button, 31 | .vb-video ::-webkit-media-text-track-container { 32 | display: none; 33 | } 34 | -------------------------------------------------------------------------------- /src/app/components/vb-video/vb-video.html: -------------------------------------------------------------------------------- 1 |
2 | 16 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpModule } from '@angular/http'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { VbCaptions } from './components/vb-captions/vb-captions'; 7 | import { VbDrop } from './components/vb-drop/vb-drop'; 8 | import { VbScroll } from './components/vb-scroll/vb-scroll'; 9 | import { VbVideo } from './components/vb-video/vb-video'; 10 | import { SubtitlesParser } from './services/subtitles-parser'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | AppComponent, 15 | VbCaptions, 16 | VbDrop, 17 | VbScroll, 18 | VbVideo 19 | ], 20 | imports: [ 21 | BrowserModule, 22 | HttpModule 23 | ], 24 | providers: [SubtitlesParser], 25 | bootstrap: [AppComponent] 26 | }) 27 | export class AppModule { } 28 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/docs/referenceConf.js 3 | 4 | /*global jasmine */ 5 | var SpecReporter = require('jasmine-spec-reporter'); 6 | 7 | exports.config = { 8 | allScriptsTimeout: 11000, 9 | specs: [ 10 | './e2e/**/*.e2e-spec.ts' 11 | ], 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | directConnect: true, 16 | baseUrl: 'http://localhost:4200/', 17 | framework: 'jasmine', 18 | jasmineNodeOpts: { 19 | showColors: true, 20 | defaultTimeoutInterval: 30000, 21 | print: function() {} 22 | }, 23 | useAllAngular2AppRoots: true, 24 | beforeLaunch: function() { 25 | require('ts-node').register({ 26 | project: 'e2e' 27 | }); 28 | }, 29 | onPrepare: function() { 30 | jasmine.getEnv().addReporter(new SpecReporter()); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/app/components/vb-captions/vb-captions.css: -------------------------------------------------------------------------------- 1 | .vb-captions { 2 | max-height: 100%; 3 | overflow-x: hidden; 4 | overflow-y: auto; 5 | background: #fff; 6 | color: #333; 7 | } 8 | 9 | .vb-captions__caption { 10 | font-size: 0.9em; 11 | cursor: pointer; 12 | margin: 0; 13 | padding: 1em; 14 | transition: background-color 100ms linear; 15 | } 16 | 17 | .vb-captions__caption * { 18 | color: #333 !important; 19 | } 20 | 21 | .vb-captions__caption:hover { 22 | background-color: #b1e7f8; 23 | } 24 | 25 | .vb-captions__caption:active, 26 | .vb-captions__caption_active:hover, 27 | .vb-captions__caption_active { 28 | background-color: #008bc7; 29 | color: #fff; 30 | } 31 | 32 | .vb-captions__caption_active, 33 | .vb-captions__caption_previous { 34 | transition: background-color 300ms linear; 35 | } 36 | 37 | .vb-captions__caption_previous { 38 | background-color: rgba(0, 139, 199, 0.7); 39 | color: #fff; 40 | } 41 | -------------------------------------------------------------------------------- /src/app/components/vb-captions/vb-captions.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, Output, EventEmitter, ElementRef} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'vb-captions', 5 | styleUrls: [ './vb-captions.css' ], 6 | templateUrl: './vb-captions.html' 7 | }) 8 | export class VbCaptions { 9 | lastActive = null; 10 | currentActive = null; 11 | 12 | @Input() captions: any[]; 13 | @Output() captionSelect: EventEmitter<{}> = new EventEmitter(); 14 | 15 | @Input() 16 | set activeCaption(caption) { 17 | this.lastActive = caption ? null : this.currentActive; 18 | this.currentActive = caption; 19 | } 20 | get activeCaption() { return this.currentActive; } 21 | 22 | constructor(private element: ElementRef) {} 23 | 24 | selectCaption(caption) { 25 | this.captionSelect.next({ 26 | caption: caption 27 | }); 28 | } 29 | 30 | isPrevActive(caption) { 31 | return this.lastActive && (this.lastActive.id == caption.id); 32 | } 33 | 34 | isActive(caption) { 35 | return this.currentActive && (this.currentActive.id == caption.id); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', 'angular-cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-remap-istanbul'), 12 | require('angular-cli/plugins/karma') 13 | ], 14 | files: [ 15 | { pattern: './src/test.ts', watched: false } 16 | ], 17 | preprocessors: { 18 | './src/test.ts': ['angular-cli'] 19 | }, 20 | remapIstanbulReporter: { 21 | reports: { 22 | html: 'coverage', 23 | lcovonly: './coverage/coverage.lcov' 24 | } 25 | }, 26 | angularCli: { 27 | config: './angular-cli.json', 28 | environment: 'dev' 29 | }, 30 | reporters: config.angularCli && config.angularCli.codeCoverage 31 | ? ['progress', 'karma-remap-istanbul'] 32 | : ['progress'], 33 | port: 9876, 34 | colors: true, 35 | logLevel: config.LOG_INFO, 36 | autoWatch: true, 37 | browsers: ['Chrome'], 38 | singleRun: false 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import './polyfills.ts'; 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | 10 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 11 | declare var __karma__: any; 12 | declare var require: any; 13 | 14 | // Prevent Karma from running prematurely. 15 | __karma__.loaded = function () {}; 16 | 17 | 18 | Promise.all([ 19 | System.import('@angular/core/testing'), 20 | System.import('@angular/platform-browser-dynamic/testing') 21 | ]) 22 | // First, initialize the Angular testing environment. 23 | .then(([testing, testingBrowser]) => { 24 | testing.getTestBed().initTestEnvironment( 25 | testingBrowser.BrowserDynamicTestingModule, 26 | testingBrowser.platformBrowserDynamicTesting() 27 | ); 28 | }) 29 | // Then we find all the tests. 30 | .then(() => require.context('./', true, /\.spec\.ts/)) 31 | // And load the modules. 32 | .then(context => context.keys().map(context)) 33 | // Finally, start Karma to run the tests. 34 | .then(__karma__.start, __karma__.error); 35 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | videoUrl: URL = null; 10 | captionsUrl: string = null; 11 | title: string = ''; 12 | captions: any[] = null; 13 | activeCaption = null; 14 | currentTime: number = null; 15 | isError: boolean = false; 16 | 17 | constructor() {} 18 | 19 | onVideoEvent(data) { 20 | switch (data.event) { 21 | case 'captionsReady': 22 | this.captions = data.captions; 23 | return; 24 | case 'captionChange': 25 | this.activeCaption = data.activeCaption; 26 | return; 27 | case 'error': 28 | this.isError = true; 29 | return; 30 | } 31 | } 32 | 33 | loadVideo($event) { 34 | this.isError = false; 35 | this.videoUrl = $event.url; 36 | this.title = $event.name.split('.').slice(0, -1); 37 | } 38 | 39 | loadCaptions($event) { 40 | this.captions = null; 41 | this.captionsUrl = $event.url; 42 | } 43 | 44 | onCaptionsSelect($event) { 45 | this.currentTime = $event.caption.startTime; 46 | setTimeout(() => { 47 | this.currentTime = null; 48 | }, 0); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "project": { 3 | "version": "1.0.0-beta.19-3", 4 | "name": "videobook" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "test": "test.ts", 17 | "tsconfig": "tsconfig.json", 18 | "prefix": "app", 19 | "mobile": false, 20 | "styles": [ 21 | "styles.css" 22 | ], 23 | "scripts": [], 24 | "environments": { 25 | "source": "environments/environment.ts", 26 | "dev": "environments/environment.ts", 27 | "prod": "environments/environment.prod.ts" 28 | } 29 | } 30 | ], 31 | "addons": [], 32 | "packages": [], 33 | "e2e": { 34 | "protractor": { 35 | "config": "./protractor.conf.js" 36 | } 37 | }, 38 | "test": { 39 | "karma": { 40 | "config": "./karma.conf.js" 41 | } 42 | }, 43 | "defaults": { 44 | "styleExt": "css", 45 | "prefixInterfaces": false, 46 | "inline": { 47 | "style": false, 48 | "template": false 49 | }, 50 | "spec": { 51 | "class": false, 52 | "component": true, 53 | "directive": true, 54 | "module": false, 55 | "pipe": true, 56 | "service": true 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videobook", 3 | "version": "0.0.1", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "start": "ng serve", 8 | "lint": "tslint \"src/**/*.ts\"", 9 | "test": "ng test", 10 | "pree2e": "webdriver-manager update", 11 | "e2e": "protractor", 12 | "deploy": "ng github-pages:deploy --base-href '/'" 13 | }, 14 | "private": true, 15 | "dependencies": { 16 | "@angular/common": "~2.1.0", 17 | "@angular/compiler": "~2.1.0", 18 | "@angular/core": "~2.1.0", 19 | "@angular/forms": "~2.1.0", 20 | "@angular/http": "~2.1.0", 21 | "@angular/platform-browser": "~2.1.0", 22 | "@angular/platform-browser-dynamic": "~2.1.0", 23 | "@angular/router": "~3.1.0", 24 | "core-js": "^2.4.1", 25 | "rxjs": "5.0.0-beta.12", 26 | "ts-helpers": "^1.1.1", 27 | "zone.js": "^0.6.23" 28 | }, 29 | "devDependencies": { 30 | "@types/jasmine": "^2.2.30", 31 | "@types/node": "^6.0.42", 32 | "angular-cli": "1.0.0-beta.19-3", 33 | "codelyzer": "1.0.0-beta.1", 34 | "jasmine-core": "2.4.1", 35 | "jasmine-spec-reporter": "2.5.0", 36 | "karma": "1.2.0", 37 | "karma-chrome-launcher": "^2.0.0", 38 | "karma-cli": "^1.0.1", 39 | "karma-jasmine": "^1.0.2", 40 | "karma-remap-istanbul": "^0.2.1", 41 | "protractor": "4.0.9", 42 | "ts-node": "1.2.1", 43 | "tslint": "3.13.0", 44 | "typescript": "~2.0.3", 45 | "webdriver-manager": "10.2.5" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | import { VbCaptions } from './components/vb-captions/vb-captions'; 6 | import { VbDrop } from './components/vb-drop/vb-drop'; 7 | import { VbScroll } from './components/vb-scroll/vb-scroll'; 8 | import { VbVideo } from './components/vb-video/vb-video'; 9 | import { SubtitlesParser } from './services/subtitles-parser'; 10 | 11 | describe('App: Videobook', () => { 12 | beforeEach(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [ 15 | AppComponent, 16 | VbCaptions, 17 | VbDrop, 18 | VbScroll, 19 | VbVideo 20 | ], 21 | providers: [SubtitlesParser] 22 | }); 23 | }); 24 | 25 | it('should create the app', async(() => { 26 | let fixture = TestBed.createComponent(AppComponent); 27 | let app = fixture.debugElement.componentInstance; 28 | expect(app).toBeTruthy(); 29 | })); 30 | 31 | it(`should have a title`, async(() => { 32 | let fixture = TestBed.createComponent(AppComponent); 33 | let app = fixture.debugElement.componentInstance; 34 | expect(app.title).toEqual(''); 35 | })); 36 | 37 | it('should render title in a h1 tag', async(() => { 38 | let fixture = TestBed.createComponent(AppComponent); 39 | fixture.detectChanges(); 40 | let compiled = fixture.debugElement.nativeElement; 41 | expect(compiled).toBeDefined() 42 | })); 43 | }); 44 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | Drag-and-drop a video file and the corresponding subtitles file to this page 6 |
7 | 8 |
9 |
10 | Drag-and-drop a video file 11 |
12 | 13 |
14 |

{{ title }}

15 | 16 | 20 | 21 |
22 | 23 |
24 | Error loading “{{ title }}”. Try a different file. 25 |
26 |
27 | 28 | 40 |
41 | 42 |
43 | -------------------------------------------------------------------------------- /src/app/components/vb-drop/vb-drop.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, Output, EventEmitter} from '@angular/core'; 2 | import {SubtitlesParser} from '../../services/subtitles-parser'; 3 | 4 | @Component({ 5 | selector: 'vb-drop', 6 | styleUrls: [ './vb-drop.css' ], 7 | templateUrl: './vb-drop.html' 8 | }) 9 | export class VbDrop { 10 | @Input() url: string; 11 | @Output() uploadVideo: EventEmitter<{}> = new EventEmitter(); 12 | @Output() uploadCaptions: EventEmitter<{}> = new EventEmitter(); 13 | 14 | isDragover = false; 15 | prevVideoUrl = null; 16 | 17 | constructor(private subParser: SubtitlesParser) {} 18 | 19 | private isCaptions(file) { 20 | return /\.(vtt|srt|ass|ssa)$/.test(file.name); 21 | } 22 | 23 | private loadCaptions(file) { 24 | let reader = new FileReader(); 25 | reader.readAsText(file); 26 | reader.onload = (e) => { 27 | let vtt = this.subParser.toVTT(e.target['result']); 28 | this.uploadCaptions.next({ 29 | url: 'data:text/vtt;charset=utf-8,' + encodeURIComponent(vtt) 30 | }); 31 | }; 32 | } 33 | 34 | private loadVideo(file) { 35 | if (this.prevVideoUrl) { 36 | URL.revokeObjectURL(this.prevVideoUrl); 37 | } 38 | 39 | this.prevVideoUrl = URL.createObjectURL(file); 40 | this.uploadVideo.next({ 41 | url: this.prevVideoUrl, 42 | type: file.type, 43 | name: file.name 44 | }); 45 | } 46 | 47 | private stopEvent(e) { 48 | e.preventDefault(); 49 | e.stopPropagation(); 50 | } 51 | 52 | onDragover(e) { 53 | this.stopEvent(e); 54 | this.isDragover = true; 55 | } 56 | 57 | onDragleave(e) { 58 | this.stopEvent(e); 59 | this.isDragover = false; 60 | } 61 | 62 | onDrop(e) { 63 | this.stopEvent(e); 64 | this.isDragover = false; 65 | 66 | Array.prototype.forEach.call(e.dataTransfer.files, (file) => { 67 | this.isCaptions(file) ? this.loadCaptions(file) : this.loadVideo(file); 68 | }); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "class-name": true, 7 | "comment-format": [ 8 | true, 9 | "check-space" 10 | ], 11 | "curly": true, 12 | "eofline": true, 13 | "forin": true, 14 | "indent": [ 15 | true, 16 | "spaces" 17 | ], 18 | "label-position": true, 19 | "label-undefined": true, 20 | "max-line-length": [ 21 | true, 22 | 140 23 | ], 24 | "member-access": false, 25 | "member-ordering": [ 26 | true, 27 | "static-before-instance", 28 | "variables-before-functions" 29 | ], 30 | "no-arg": true, 31 | "no-bitwise": true, 32 | "no-console": [ 33 | true, 34 | "debug", 35 | "info", 36 | "time", 37 | "timeEnd", 38 | "trace" 39 | ], 40 | "no-construct": true, 41 | "no-debugger": true, 42 | "no-duplicate-key": true, 43 | "no-duplicate-variable": true, 44 | "no-empty": false, 45 | "no-eval": true, 46 | "no-inferrable-types": true, 47 | "no-shadowed-variable": true, 48 | "no-string-literal": false, 49 | "no-switch-case-fall-through": true, 50 | "no-trailing-whitespace": true, 51 | "no-unused-expression": true, 52 | "no-unused-variable": true, 53 | "no-unreachable": true, 54 | "no-use-before-declare": true, 55 | "no-var-keyword": true, 56 | "object-literal-sort-keys": false, 57 | "one-line": [ 58 | true, 59 | "check-open-brace", 60 | "check-catch", 61 | "check-else", 62 | "check-whitespace" 63 | ], 64 | "quotemark": [ 65 | true, 66 | "single" 67 | ], 68 | "radix": true, 69 | "semicolon": [ 70 | "always" 71 | ], 72 | "triple-equals": [ 73 | true, 74 | "allow-null-check" 75 | ], 76 | "typedef-whitespace": [ 77 | true, 78 | { 79 | "call-signature": "nospace", 80 | "index-signature": "nospace", 81 | "parameter": "nospace", 82 | "property-declaration": "nospace", 83 | "variable-declaration": "nospace" 84 | } 85 | ], 86 | "variable-name": false, 87 | "whitespace": [ 88 | true, 89 | "check-branch", 90 | "check-decl", 91 | "check-operator", 92 | "check-separator", 93 | "check-type" 94 | ], 95 | 96 | "directive-selector-prefix": [true, "app"], 97 | "component-selector-prefix": [true, "app"], 98 | "directive-selector-name": [true, "camelCase"], 99 | "component-selector-name": [true, "kebab-case"], 100 | "directive-selector-type": [true, "attribute"], 101 | "component-selector-type": [true, "element"], 102 | "use-input-property-decorator": true, 103 | "use-output-property-decorator": true, 104 | "use-host-property-decorator": true, 105 | "no-input-rename": true, 106 | "no-output-rename": true, 107 | "use-life-cycle-interface": true, 108 | "use-pipe-transform-interface": true, 109 | "component-class-suffix": true, 110 | "directive-class-suffix": true, 111 | "templates-use-public": true, 112 | "invoke-injectable": true 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/app/services/subtitles-parser.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | 3 | @Injectable() 4 | export class SubtitlesParser { 5 | constructor() {} 6 | 7 | private ass(text: string) { 8 | let reAss = new RegExp( 9 | 'Dialogue:\\s\\d,' + // get time and subtitle 10 | '(\\d+:\\d\\d:\\d\\d.\\d\\d),' + // start time 11 | '(\\d+:\\d\\d:\\d\\d.\\d\\d),' + // end time 12 | '([^,]*),' + // object 13 | '([^,]*),' + // actor 14 | '(?:[^,]*,){4}' + 15 | '(.*)$', // subtitle 16 | 'i' 17 | ); 18 | let reTime = /(\d+):(\d\d):(\d\d).(\d\d)/; 19 | let reStyle = /\{[^}]+\}/g; 20 | 21 | let getSeconds = function (timeStr) { 22 | let match = timeStr.match(reTime); 23 | return Math.round( 24 | parseInt(match[1], 10) * 60 * 60 * 1000 + 25 | parseInt(match[2], 10) * 60 * 1000 + 26 | parseInt(match[3], 10) * 1000 + 27 | parseInt(match[4], 10) * 10 28 | ) / 1000; 29 | }; 30 | 31 | let lines = text.split(/[\n\r]+/g); 32 | let captions = lines.map(function (line, index) { 33 | let match = line.match(reAss); 34 | if (!match) { return null; } 35 | return { 36 | id: index + 1, 37 | startTime: getSeconds(match[1]), 38 | endTime: getSeconds(match[2]), 39 | text: match[5].replace(reStyle, '').replace(/\\N/g, '\n'), 40 | voice: match[3] && match[4] ? match[3] + ' ' + match[4] : '' 41 | }; 42 | }).filter(function (caption) { 43 | return caption != null; 44 | }); 45 | 46 | return captions.length ? captions : null; 47 | } 48 | 49 | private srt(text: string) { 50 | let reTime = /(\d\d):(\d\d):(\d\d),(\d\d\d)/; 51 | 52 | if (!reTime.test(text)) { 53 | return null; 54 | } 55 | 56 | let getSeconds = function (timeStr) { 57 | let match = timeStr.match(reTime); 58 | return Math.round( 59 | parseInt(match[1], 10) * 60 * 60 * 1000 + 60 | parseInt(match[2], 10) * 60 * 1000 + 61 | parseInt(match[3], 10) * 1000 + 62 | parseInt(match[4], 10) 63 | ) / 1000; 64 | }; 65 | 66 | let entries = text.split(/\n[\r\n]+/g); 67 | let captions = entries.map(function (entry) { 68 | let lines = entry.split(/\n+/g); 69 | if (lines.length < 3) { return null; } 70 | let timestamps = lines[1].split(/\s*-->\s*/); 71 | return { 72 | id: lines[0], 73 | startTime: getSeconds(timestamps[0]), 74 | endTime: getSeconds(timestamps[1]), 75 | text: lines.slice(2).join('\n') 76 | }; 77 | }).filter(function (caption) { 78 | return caption != null; 79 | }); 80 | 81 | return captions.length ? captions : null; 82 | } 83 | 84 | private formatVtt(captions: any[]) { 85 | let padWithZeros = (num, digits) => ('0000' + num).slice(-digits); 86 | 87 | let formatTime = function (seconds) { 88 | let date = new Date(2000, 0, 1, 0, 0, 0, seconds * 1000); 89 | return [ 90 | padWithZeros(date.getHours(), 2), 91 | padWithZeros(date.getMinutes(), 2), 92 | padWithZeros(date.getSeconds(), 2) + '.' + padWithZeros(date.getMilliseconds(), 3) 93 | ].join(':'); 94 | }; 95 | 96 | let lines = captions.map(function (caption) { 97 | return [ 98 | caption.id, 99 | formatTime(caption.startTime) + ' --> ' + formatTime(caption.endTime), 100 | (caption.voice ? '' : '') + caption.text 101 | ].join('\n'); 102 | }); 103 | 104 | return 'WEBVTT\n\n' + lines.join('\n\n'); 105 | } 106 | 107 | toVTT(text: string) { 108 | if (text.indexOf('WEBVTT') == 0) { 109 | return text; 110 | } 111 | 112 | let parsed = this.ass(text) || this.srt(text); 113 | if (parsed) { 114 | return this.formatVtt(parsed); 115 | } 116 | 117 | return text; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/app/components/vb-video/vb-video.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, Output, EventEmitter, ElementRef, HostListener} from '@angular/core'; 2 | import {DomSanitizer} from '@angular/platform-browser'; 3 | 4 | @Component({ 5 | selector: 'vb-video', 6 | styleUrls: [ './vb-video.css' ], 7 | templateUrl: './vb-video.html' 8 | }) 9 | export class VbVideo { 10 | private captionTracks = []; 11 | private activeCaption; 12 | private prevActiveCaption; 13 | private videoElement: HTMLVideoElement; 14 | displayedText: string = ''; 15 | 16 | constructor(private sanitizer: DomSanitizer, private element: ElementRef) {} 17 | 18 | ngAfterViewInit() { 19 | this.videoElement = this.element.nativeElement.querySelector('video'); 20 | } 21 | 22 | // Video URL 23 | @Input() 24 | set videoUrl(url) { 25 | if (this.videoElement) { 26 | this.videoElement.src = url; 27 | } 28 | } 29 | get videoUrl() { return this.videoElement ? this.videoElement.src : ''; } 30 | 31 | // Current time 32 | @Input() 33 | set currentTime(time) { 34 | if (this.videoElement && time != null) { 35 | this.videoElement.currentTime = time; 36 | this.videoElement.play(); 37 | } 38 | } 39 | get currentTime() { return this.videoElement ? this.videoElement.currentTime : 0; } 40 | 41 | // Captions URL 42 | @Input() 43 | set captionsUrl(url) { 44 | this.captionTracks = []; 45 | this.captionTracks.push({ 46 | url: this.sanitizer.bypassSecurityTrustResourceUrl(url) 47 | }); 48 | } 49 | get captionsUrl() { 50 | return this.captionTracks[0] ? this.captionTracks[0].url : null; 51 | } 52 | 53 | // Output stream 54 | @Output() videoStream: EventEmitter<{}> = new EventEmitter(); 55 | 56 | @HostListener('document:keydown', [ '$event' ]) 57 | onKeyup($event) { 58 | switch ($event.code) { 59 | case 'Space': 60 | $event.preventDefault(); 61 | return this.playPause(); 62 | case 'Enter': 63 | $event.preventDefault(); 64 | return this.replayCaption(); 65 | case 'ArrowLeft': 66 | case 'ArrowUp': 67 | $event.preventDefault(); 68 | return this.nextCaption(-1); 69 | case 'ArrowDown': 70 | case 'ArrowRight': 71 | $event.preventDefault(); 72 | return this.nextCaption(1); 73 | } 74 | } 75 | 76 | private playPause() { 77 | this.videoElement.paused ? this.videoElement.play() : this.videoElement.pause(); 78 | } 79 | 80 | private playCaption(caption) { 81 | if (!caption) return; 82 | this.videoElement.currentTime = caption.startTime; 83 | this.videoElement.play(); 84 | } 85 | 86 | private replayCaption() { 87 | let track = this.getTrack(); 88 | if (!track) return; 89 | this.playCaption(this.activeCaption || this.prevActiveCaption || track.cues[0]); 90 | } 91 | 92 | private nextCaption(delta) { 93 | let track = this.getTrack(); 94 | if (!track) return; 95 | 96 | let active = this.activeCaption || this.prevActiveCaption; 97 | if (!active) return this.playCaption(track.cues[0]); 98 | 99 | let index = Array.prototype.indexOf.call(track.cues, active); 100 | let next = track.cues[index + delta]; 101 | 102 | this.playCaption(next); 103 | } 104 | 105 | private getCaption(cue) { 106 | let caption = { 107 | id: cue.id, 108 | startTime: cue.startTime, 109 | endTime: cue.endTime, 110 | text: cue.text.replace(/\n/g, '
') 111 | }; 112 | if (!caption.id) { 113 | delete caption.id; 114 | caption.id = JSON.stringify(caption); 115 | } 116 | return caption; 117 | } 118 | 119 | private getTrack() { 120 | let tracks = this.videoElement.textTracks; 121 | let track = tracks && tracks[0]; 122 | 123 | if (!track) return null; 124 | 125 | // Hide the built-in captions 126 | track.mode = 'hidden'; 127 | 128 | return track; 129 | } 130 | 131 | captionsOnLoad() { 132 | this.activeCaption = null; 133 | this.prevActiveCaption = null; 134 | 135 | let track = this.getTrack(); 136 | if (!track) return; 137 | 138 | this.videoStream.next({ 139 | event: 'captionsReady', 140 | captions: Array.prototype.map.call(track.cues, this.getCaption, this) 141 | }); 142 | } 143 | 144 | captionsOnCuechange() { 145 | if (this.activeCaption) this.prevActiveCaption = this.activeCaption; 146 | this.activeCaption = null; 147 | 148 | let track = this.getTrack(); 149 | if (!track) return; 150 | 151 | let activeCue = track.activeCues[0]; 152 | let transformedCaption = null; 153 | 154 | if (activeCue) { 155 | this.activeCaption = activeCue; 156 | transformedCaption = this.getCaption(activeCue); 157 | 158 | if (transformedCaption.text) this.displayedText = transformedCaption.text; 159 | } 160 | 161 | this.videoStream.next({ 162 | event: 'captionChange', 163 | activeCaption: transformedCaption 164 | }); 165 | } 166 | } 167 | --------------------------------------------------------------------------------