Code Monkey home page Code Monkey logo

quead / angular-youtube-player Goto Github PK

View Code? Open in Web Editor NEW
35.0 5.0 19.0 6.8 MB

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

Home Page: https://habarnam.io/player/home

License: MIT License

TypeScript 81.05% JavaScript 0.39% HTML 8.45% CSS 10.11%
youtube player angular typescript css4 css3 video-player youtube-player youtube-api playlist music-player youtube-search angular-cli application web-application angular6 angular7 angular-youtube-player music

angular-youtube-player's Introduction

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.

angular-youtube-player's People

Contributors

dependabot[bot] avatar quead avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.