Skip to content

Simple youtube player created with angular and typescript. See demo.

License

Notifications You must be signed in to change notification settings

quead/angular-youtube-player

Repository files navigation

Demo Angular YouTube Player Logo

About Player

Version Angular 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 RC (release candidate).

How to use

For development

  1. Install NodeJS 16.14.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. Start your server

npm install && npm start in root folder

  1. Connect to your server

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

To build the app

  1. Install angular-cli

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.6.0

  • List of guests in the session
  • Minor issues fixed (RC)
  • Add mini player when you scroll
  • First video from playlist is now the current video

Angular YouTube Player 2.5.2

  • Add category badge to feed videos and current video
  • UI updates
  • New modal component

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

  • *Release a stable version (in v2.6.9)*
  • *Set private/public room (in v2.7)*
  • *List of public rooms (in v2.8)*
  • *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)
  • Themes temporary removed

Copyright and License

Copyright quead under the MIT license.