Skip to content
Simple youtube player created with angular and typescript. See demo.
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Demo Angular YouTube Player Logo

About Player

Version

GitHub license GitHub forks GitHub stars

This is a simple youtube web player based on angular-cli, ngx-socket-io, @angular/cdk.

This player is compatible only with Chrome/webkit browsers.

The project status is beta.

How to use

For development

  1. Install NodeJS 10.16.0+

  2. Download/clone repository then install the player by

npm install in root folder (not in /src)

  1. Add your youtube api key in src/app/environments/settings.ts or inside the app on settings page (when is running)

  2. To connect to your server

You must change inside src/app/environments/environment.ts your path to your server.

  1. Connect to your server

npm start in root folder

For building the app

  1. Install angular-cli 7.3.7+

npm install -g @angular/cli

  1. Run inside the root folder (not in /src)

Check angular documentation for other build options.

ng build --prod=true

Changelog

Angular YouTube Player 2.5.1

  • Upgrade angular to LTS (from 7 to 8)
  • Fixed repeat mode
  • Update layout for playlist / related videos

Angular YouTube Player 2.5

  • Cleaned the project to avoid using a lot of dependencies
  • Fix the issue when you change the region didn't updated the player
  • Improved UX for playlist
  • Added client name to identify each users in the room

Angular YouTube Player 2.4

  • Switched from firebase to json through socket.io and private server
  • Responsive layout
  • Sync player in session
  • Rooms: join/leave room by unique id
  • Playlist is no more auto populated when is empty
  • You can't export/import anymore from .JSON file

Angular YouTube Player 2.3.3

  • Fixed bugs after refactoring
  • Added session key for playlist which you can upload to cloud and download from cloud (integrated with firebase)
  • Layout update
  • Updated from angular 5.2.0 to 7.0.1
  • Carousel added for related videos (used ngu-carousel)

Angular YouTube Player 2.3

  • Updating to LTS angular
  • Refactoring entire app services and components
  • Improved speed performance and fixed major bugs
  • New way to loading the app

Angular YouTube Player 2.2

Angular YouTube Player 2.1

  • Categories with videos like (music, gaming, autos, films, sports, etc.)
  • Refactoring code
  • Search on specific region
  • Fixing copy link for featured video
  • UX improvements

Angular YouTube Player 2.0.1

  • Import & export youtube playlist as .JSON file

Angular YouTube Player 2.0

  • Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
  • Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
  • Auto updating the app (desktop version)

Angular YouTube Player 1.9.2

  • UX improvements and fixes
  • Preparing files for 2.0

Angular YouTube Player 1.9.1

  • Get settings.json for localstorage if your localstorage is empty
  • The playlist automatically saving, if is empty it will be populated with related videos
  • Toggle light/dark theme mode
  • Share link button for all videos
  • Reorganised settings page
  • Auto saving for internal settings (check settings)
  • Manual saving for external settings (check settings)
  • Performance, UI and UX improvements and fixes

Angular YouTube Player 1.9

  • Add/remove items from playlist, first time when is initialized It is prepopulated with related videos
  • Next/prev video from your playlist
  • Moved history to separate page
  • Adding toggle video, repeat mode and list & grid on trending to settings.json
  • Small fixes

Angular YouTube Player 1.7

  • Added featured video as first video from trending
  • Notifications for important actions you do
  • Removed debugging mode
  • Preparing packages, code and files for v2.0
  • Improved UI/UX for lists

Angular YouTube Player 1.6

  • Video details for current video and trending videos like number of views, likes and dislikes
  • Share link for current video
  • Added new setting for hiding all thumbnails
  • Custom player buttons shows now only when you hide video

Angular YouTube Player 1.4

  • History of your watched videos
  • Small fixes

Angular YouTube Player 1.3

  • Show/hide video player
  • Repeat video
  • Grid/list mode for trending videos
  • Settings (you can set default from "assets/settings.json", soon will be directly from settings)
  • Change country for trending videos (currently only three countries, US, UK and RO)
  • Max results show in search (0 to 50)
  • YOUR_API Key
  • Max related videos (0 to 50)

Angular YouTube Player 1.2

  • Introducing trending videos, currently default trending videos are from United States
  • Refactoring the code
  • Adding routes for future components which it will show in left navbar
  • Default video will be first from trending videos
  • Adding the video player
  • Update the design to match the new features

Angular YouTube Player 1.1

  • Adding mute/unmute functionality
  • Improved user interface and user experience
  • Adding settings functionality, the settings will get from assets/settings.json

Settings

  • Show/hide debugging features
  • Show/hide thumbnails in search

Angular YouTube Player 1.0.2

  • Change volume on your video
  • Related videos

Angular YouTube Player 1.0.0

  • Search and play video from youtube
  • Play/pause video
  • Change time of your video that you want to listen

Future features

Backlog

  • iOS 8+ / android 5+ app (unversioned)

Rooms

  • Room chat (unversioned)

Roadmap to 3.0

  • List of users joined in the session (in v2.6)
  • Set private/public room (in v2.7)
  • List of public rooms (in v2.9)
  • Room moderators which can add videos, kick roommates, mute roommates (in v2.9)

Roadmap to 4.0

  • Integrating YouTube account subscriptions/playlist (in v3.0)

Removed features

  • Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
  • Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
  • Auto updating the app (desktop version)
  • Temporary removed theme function

Copyright and License

Copyright quead under the MIT license.

You can’t perform that action at this time.