Commit 3916d79f authored by Joaquin A. Decima's avatar Joaquin A. Decima 🐧
Browse files

UPDATE

parent ecbcc421
Pipeline #98482174 failed with stage
in 1 minute and 29 seconds
node_modules
typings
dist
package-lock.json
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# compiled output
/dist
/tmp
# Coverage directory used by tools like istanbul
coverage
# dependencies
/node_modules
/bower_components
# IDEs and editors
/.idea
.project
.classpath
*.launch
.settings/
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
/src/app/lib
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Users Environment Variables
.lock-wscript
# e2e
/e2e/*.js
/e2e/*.map
# OS generated files #
#System Files
.DS_Store
ehthumbs.db
# Icon?
Thumbs.db
# Node Files #
/node_modules
npm-debug.log
# Coverage #
/coverage/
/.vscode
# Typing #
/src/typings/tsd/
/typings/
/tsd_typings/
# Dist #
/dist
/public/__build__/
/src/*/__build__/
/__build__/**
/public/dist/
/src/*/dist/
/dist/**
.webpack.json
# Doc #
/doc/
# IDE #
.idea/
*.swp
*.tag*
......@@ -5,8 +5,6 @@ pages:
script:
- npm install -g @angular/cli
- npm install
- npm install typescript@3.5
- npm install -g typescript@3.5
- ng build
artifacts:
paths:
......
package-lock=false
\ No newline at end of file
[![Build Status](https://travis-ci.org/orizens/echoes-player.svg?branch=master)](https://travis-ci.org/orizens/echoes-player) [![Code Climate](https://codeclimate.com/github/orizens/echoes-player/badges/gpa.svg)](https://codeclimate.com/github/orizens/echoes-player)
![ngx-youtube-player-logo](https://raw.githubusercontent.com/SamirHodzic/ngx-youtube-player/master/src/assets/logo_git.png)
## [Join Echoes Slack Channel](https://join.slack.com/t/echoesplayer/shared_invite/enQtMzcwMDI4OTI3MjAzLTljZDI3YTA2OGY2ZWY1NTg2M2RmN2UyZGIxOTI4Y2IwMGI4Mzg5MWFlZTZhYTQzZWI5NDVjMGE3ZTQ5OTJjNDA)
# ngx-YouTube-Player
[![build-url][build-url-svg]][build-url]
[![Dependencies][dependencies]][dependencies-url]
[![Dev Dependencies][dev-dependencies]][dev-dependencies-url]
# Echoes Player - Angular Version (2nd Generation)
> YouTube player app built with Angular 7 (latest 7.1.4).
Echoes is a great youtube player developed by [Oren Farhi](http://orizens.com).
It's fun & easy to listen or watch videos from youtube with Echoes.
What if youtube was designed to be used as music player?
This repository is an implementation of Echoes Player with Angular (2nd genration)- It's still a work in progress aimed at learning and experimenting Angular (2nd generation).
[Demo](https://samirhodzic.github.io/ngx-youtube-player) (Updated: 06/01/2019)
Echoes Player is also available as a [Chrome Application](https://chrome.google.com/webstore/detail/echoes-player/aaenpaopfebcmdaegggjbkhaedlbbkde)
## Quickstart
It can be regarded as the Media Player experience for youtube listening pleasure.
**Note**: Require Node 4+ together with Npm 3+, also be sure to install
<p align="center">
<a href="http://echoesplayer.com" target="_blank">
<img src="https://user-images.githubusercontent.com/878660/53698116-72b76d80-3da6-11e9-82be-f185c1951cf9.png" alt="Webpack, Angular, ngrx, bootstrap" width="75%"/>
</a>
</p>
**1- Install [Angular-CLI](https://github.com/angular/angular-cli) (latest 7.1.4) :**
## Angular Consulting Services at Orizens
```bash
$ npm install -g @angular/cli@latest
```
I'm a Senior Javascript Engineer & A Front End Consultant.
My services include:
**2- Clone the project:**
* consulting to companies and startups on how to approach code in their projects and keep it maintainable.
* I provide project bootstrapping and development - while afterwards, I integrate it on site and guide the team on it.
```bash
$ git clone https://github.com/SamirHodzic/ngx-youtube-player
$ cd ngx-youtube-player
```
[Contact Me Here](http://orizens.com/contact)
**3- Install the npm packages described in the package.json :**
<a href="http://orizens.com" target="_blank">
<img src="https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png" alt="Webpack and Angular" width="20%"/>
</a>
```bash
$ npm install
```
# Tech Stack
**4- Transpile typescript into javascript, host the app and monitor the changes :**
## Included @ngrx solutions:
```bash
$ ng serve
```
* [ngrx/store](https://github.com/ngrx/platform/blob/master/docs/store/README.md) - State Management a la "[Redux](https://github.com/reactjs/redux)" based on RxJs
* [ngrx/effects](https://github.com/ngrx/platform/blob/master/docs/effects/README.md) - Side Effects layer for ngrx/store
* ~[ngrx/router-store](https://github.com/ngrx/platform/blob/master/docs/router-store/README.md) - Bindings to connect the Angular Router to @ngrx/store~
* [ngrx-store-localstorage](https://github.com/btroncone/ngrx-store-localstorage) - local sotrage support for ngrx/store
* [ngrx/store-devtools](https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md) - a connector to [redux devtool](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en-US) for chrome
Visit http://localhost:4200 and enjoy!
## Included Technologies & Libraries
## Dependencies
- [Angular](https://angular.io/) with [Typescript](https://www.typescriptlang.org/)
- [Angular CLI](https://cli.angular.io/)
- [Material Design Lite](https://github.com/google/material-design-lite/)
* [Angular](http://angular.io)
* [Angular CLI](https://cli.angular.io/)
* [@ngrx Platform](https://github.com/ngrx/platform)
* Bootstrap v3.x (SASS, selected modules)
* Typescript (latest)
* ECMAscript latest
## Features
- Play music while searching
- Extended controls
- Shuffle/Repeat options for your playlists
- Browser notifications when new song is going to start
- Different type for video displaying
- Create local playlist without authorization
- Simple Import/Export playlists as JSON
# EchoesPlayer
## TODO
- ~~'Now playing' when video is minimized~~
- ~~Update UI to be fully responsive for mobile/tablet~~
- ~~Browser notification interface when new song is going to start~~
- Save multiple playlists and switch between them
- Write tests
- ...
This project was generated with [Angular CLI](https://github.com/angular/angular-cli)
## Development server
Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
## Build
Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
### Build for Production
Run `npm run build:prod` to build the project minified for production with AOT.
## Configure api keys
Echoes use environment variables to integrate Google Analytics, youtube data api key and youtube client id for authorization.
These defiend as template variables, and are replaced after a successfull build with build-env.js.
### Youtube Keys
Generate your own keys via [google's console](https://console.cloud.google.com/apis/credentials)
Required Keys are:
`API Key`
`OAuth client ID`
### Analytics Key (Optional)
The key is the project ID usually can be retreived from the analytics Admin interface. it exist as part of the "script" to paste in your html file.
## Running unit tests
Run `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).
Run `npm run test:ci` to execute the unit tests only **Once**
## Running end-to-end tests
Run `npm run e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
# Bundle analyze explorer
[look at issue](https://github.com/angular/angular-cli/issues/4172)
1. make sure `npm i source-map-explorer -g`
1. `ng build --prod --aot --sm` (the sourcemap is for later steps)
1. `cd dist && source-map-explorer A-FILE-WITH-HASH.js`
[dependencies]: https://david-dm.org/samirhodzic/ngx-youtube-player.svg
[dependencies-url]: https://david-dm.org/samirhodzic/ngx-youtube-player
[dev-dependencies]: https://david-dm.org/samirhodzic/ngx-youtube-player/dev-status.svg
[dev-dependencies-url]: https://david-dm.org/samirhodzic/ngx-youtube-player?type=dev
[build-url]: https://travis-ci.org/SamirHodzic/ngx-youtube-player
[build-url-svg]: https://travis-ci.org/SamirHodzic/ngx-youtube-player.svg?branch=master
......@@ -3,7 +3,7 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
"echoes-player": {
"ngx-youtube-player": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
......@@ -14,126 +14,69 @@
"outputPath": "public",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"tsConfig": "src/tsconfig.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json",
"src/LICENSE"
"assets": ["src/assets", "src/favicon.ico"],
"styles": [
"src/styles.css",
"node_modules/material-design-lite/dist/material.min.css"
],
"styles": ["src/css/style.scss"],
"scripts": []
"scripts": ["node_modules/material-design-lite/material.min.js"]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"serviceWorker": true
},
"integration": {
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.integration.ts"
}
],
"serviceWorker": true
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "echoes-player:build"
"browserTarget": "ngx-youtube-player:build"
},
"configurations": {
"production": {
"browserTarget": "echoes-player:build:production"
},
"integration": {
"browserTarget": "echoes-player:build:integration"
}
}
"configurations": {}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "echoes-player:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/css/style.scss"
],
"assets": ["src/assets", "src/favicon.ico", "src/manifest.json"]
"browserTarget": "ngx-youtube-player:build"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
"tsConfig": [],
"exclude": []
}
}
}
},
"echoes-player-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "echoes-player:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["e2e/tsconfig.e2e.json"],
"exclude": ["**/node_modules/**"]
}
}
}
"ngx-youtube-player-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application"
}
},
"defaultProject": "ngx-youtube-player",
"cli": {
"warnings": {
"typescriptMismatch": false
}
},
"defaultProject": "ytplayer-patojad",
"schematics": {
"@schematics/angular:component": {
"inlineStyle": false,
"inlineTemplate": false,
"prefix": "app",
"styleext": "scss"
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
......
import { EchoesPlayerPage } from './app.po';
describe('echoes-player App', () => {
let page: EchoesPlayerPage;
beforeEach(() => {
page = new EchoesPlayerPage();
page.navigateTo();
});
it('should have a title', () => {
const actual = page.getTitle();
const expected = 'Echoes Player - Open Source Media Player for Youtube';
expect(actual).toEqual(expected);
});
it('should show 50 video search results', () => {
const actual = page.getVideoResults().count();
const expected = 50;
expect(actual).toEqual(expected);
});
});
import { browser, element, by } from 'protractor';
export class EchoesPlayerPage {
navigateTo() {
return browser.get('/');
}
getTitle() {
return browser.getTitle();
}
getTitleInput() {
return element(by.css('input[formcontrolname=title]'));
}
getVideoResults() {
return element.all(by.css('youtube-videos youtube-list .youtube-list-item'));
}
// getTalkText(index: number) {
// return this.getTalks().get(index).getText();
// }
}
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();
module.exports = function(config) {
let options = {
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-spec-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: [/* 'progress', */ 'spec', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: true
};
if (process.env.TRAVIS) {
options.singleRun = true;
}
config.set(options);
};
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
\ No newline at end of file
{
"name": "ytplayer-patojad",
"version": "4.4.2",
"name": "ngx-youtube-player",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:integration": "ng serve --configuration=integration",
"build": "ng build",
"build:prod": "ng build --prod",
"build:integration": "ng build --configuration=integration",
"build:env": "node config/build-env.js",
"postinstall": "npm rebuild node-sass",
"copy:heroku": "shx cp -r ./config/heroku/*.* ./dist",
"copy:domain": "shx cp CNAME ./dist",
"copy:package": "shx cp ./package.json ./dist/assets/",
"test": "ng test --watch",
"test:ci": "ng test",
"lint": "ng lint",
"lint:fix": "prettier --write ./src/**/*.ts",
"e2e": "ng e2e",
"clean": "rimraf -- node_modules",
"server:prod": "http-server ./dist -a localhost -p 4200"
"lint": "tslint \"src/**/*.ts\"",
"gh-deploy": "ng build --prod && npx angular-cli-ghpages",
"build": "ng build"
},
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/SamirHodzic/ngx-youtube-player"
},
"private": false,
"dependencies": {
"@angular-devkit/core": "^8.3.19",
"@angular/animations": "8.2.14",
"@angular/cdk": "7.3.7",
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "8.2.14",
"@angular/http": "7.2.7",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@angular/pwa": "0.6.8",
"@angular/router": "8.2.14",
"@angular/service-worker": "8.2.14",
"core-js": "^2.4.1",
"http-server": "0.10.0",
"memo-decorator": "1.0.2",
"ngx-tooltip": "0.0.9",
"node-sass": "^4.13.0",
"puppeteer": "^2.0.0",
"replace": "^1.1.1",
"rxjs": "6.5.3",
"sass-loader": "7.0.1",
"service-worker": "0.0.0",
"typescript": "^3.5.3",
"zone.js": "^0.9.1"
"@angular/common": "^7.0.0",
"@angular/compiler": "^7.0.0",
"@angular/core": "^7.0.0",
"@angular/forms": "^7.0.0",