rtruo001 / appletea Goto Github PK

8/2/16

As user input changes the Volume on the media player, updates the Youtube volume

We need to think of a good name for this app. Doesn't necessarily have to be clever, but it has to be thoughtful and its feel should fit our service.

After thinking of a name, we need to brainstorm a logo, whether its our name written out in a design, or an icon logo next to our name.

8/3/16

When the app is searching for media entries, there should be an image or indicator that shows that the query has successfully inputted and that search is currently loading. After the API successfully sends back the response, remove the loading indicator and display the search results.

Implement the updated design files into the main project. For now, focus on:

• replacing css and js files
• updating base html construction
  • adding header elements
  • updating chatbox styles
  • updating search styles
  • adding a footer section
  • import new font

8/3/16

Design the Loading Screen for the Media Player. This loading screen would be placed over the media player whenever the media is loading or out of sync with the rest of the clients.

Convert chat.js which is in public/javascripts into React counterpart that reads in event handlers from Socket.io (Which is located in ./bin/www).

8/2/16

The chat system is currently done on the client side with only pure Javascript and JQuery. The task is to convert the chat system into a Component that reads in event handlers from our server. After reading in the messages sent to the server and back to the clients, displays the message onto the chatbox.

Start with Chatbox.jsx in the views directory to build the components. Chatbox component is currently called in Index.jsx. Use MediaEntry.jsx and MediaPlayer.jsx as references on how to use Socket.io as an event handler in componentDidMount.

The README on Github has more information in the Chat section

Components:

Main Component

• Entire Chatbox

Sub Components

• Current user's messages
• Other user's messages
• A user has joined chat
• A user has left chat
• Input box for new message
• Input box user name (Temporarily used for now until we build a user database)

Update the Header to include navigation and dropdowns to manage:

• Your Rooms
• Create New Rooms
• User Profile Page / Also an Edit Page

8/6/16

When the move to top button is clicked on a media entry in the queue, should move that specific media entry to the top of the queue.

8/2/16

Update to the server whenever the client's Youtube video is played or paused. Sends a message to the server through Socket.io whenever the media state has changed. Afterwards sends the state back to all the clients.

Design the UI/UX of Navigating a Room
-Room Icon Right of the Title Above Chat (displays how many users online and active)

• Dropdown of Users present in Room, including sync icon, Mod Status, Offline Users
• If you're a Mod, Room title text-field should be editable (on-click and by icon)
• If you're a Mod, should have the option of adding/kicking users from the room
• Option to Leave the Room

Want to automate the minify of javascript/css. Want to also automate other things like testing too.

Also use Gulp for automating browserify whenever the file changes.

Come up with the entire schematics and algorithms for Media Syncing.

Things to consider:

• How to account for MANY users
• Delays between clients to server
• Internet connection for each user
• Multiple inputs coming from different clients (Such as many clients pushing play and pause at the same time).
• How to receive or update the current media elapsed time.
• What are the Pros and Cons of every method we come up with?
• We need to address any problems with the APIs of every media.

Hola! @rtruo001 has created a ZenHub account for the rtruo001 organization. ZenHub is the only project management tool integrated natively in GitHub – created specifically for fast-moving, software-driven teams.

How do I use ZenHub?

To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.

What can ZenHub do?

ZenHub adds a series of enhancements directly inside the GitHub UI:

• Real-time, customizable task boards for GitHub issues;
• Multi-Repository burndown charts, estimates, and velocity tracking based on GitHub Milestones;
• Personal to-do lists and task prioritization;
• Time-saving shortcuts – like a quick repo switcher, a “Move issue” button, and much more.

Add ZenHub to GitHub

Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @rtruo001.

Explore returns a list of playlists for user's viewing pleasures

Truncate Titles that overflow divs and replace end with ellipses

• can be styled with CSS
• needed for media cards titles, playlist titles, room names

8/2/16

When a client enters the room, initializes the Youtube video player in the beginning. Currently needs to be done because the Media Player does not need to continuously initialize the Youtube Iframe whenever it changes to another media type. This prevents the current Active tab bug.

Add user profile pictures to chat messages, to add-user search modal, and to the header.

Create a standard design for modal pop up

• include text and button styling
  • mostly for 2-step verification for deleting and
• include text input
  • username input and such
  • js list popup to demo dynamic search for add-users

8/2/16

Initialize video player works whenever the initialize Iframe is called. Need to update with Youtube player initializing in the beginning

Design the Chatbox:

• speech bubble styling
• make sure speech bubbles collapse correctly to each series messages under a user
• user messages and other client messages should be distinguished by color (like fb/imessage)
• include system dialogue message styling
• page load with chatbox scrolled down
• include a simple Room header for now (will update with controls)
• include styling for spinning load icon

Design a user profile page that lists user information, as well as displays their playlists. Consider being able to view their Liked Playlists, and think about ease/experience of navigation.

Design a section in Explore Tab that allows user to create a Randomized Playlist

• Dropdown of how many items to generate
• Dropdown to choose Media Type - Video or Music
  • Consider Checklist to Select Youtube, Vimeo, Soundcloud, etc.
• Input for user to type in "tags"
• Generate Random Playlist Button
• Maybe also a button to simply play a random Playlist

Font-fam Avenir can't be included in our file directory for legal reasons, look for a good webfont that keeps a consistent look. Fonts to consider, but not limited to:

• Avenir (requires purchasing)
• Proxima Nova Soft (requires purchasing)
  Google Fonts
• Rubik
• Nunito

8/3/16

There are multiple synchronization issues that may occur. We need to ensure all socket calls are called in correct order and without any problems of deadlocking.

Notable async problems:

• Play/Pause too quickly which causes every client to continuously play and pause the media.
• When media player ends, may cause the play next media entry to also end.

Finish Entire UI & UX Design for the App:

• Home Page
  • Room Creator
  • Room List / Manager
  • Friend List / Manager
  • Your Profile (and Edit)
• Room Page
  • Header & User Nav
  • Video Chat Banner
    • Video Plyr & Custom Btns/Styling
    • Room Header & Mod Controls
    • Chat Box
  • Queue List
  • Tabbed Containers
    • Explore
    • My Playlists
    • Search Media
    • Open Playlist
    • Edit Playlist
    • User Page
  • Footer

Elements to Design and Include:

• Universal Color Hex Palette (White Theme, Black Video/Chat, Teal Highlights/Contrast)
• Universal Media Card divs
• Universal Playlist Cards
• Standard Pill Styles
• Standard Button Styles
• Dropdown Menus for Search, Privacy, & Add-to-Playlist
• Tooltips for Icons and Buttons
• Pagination Design

JS/CSS Scripting:

• Draggable Media Cards in Queue and Edit-Playlist
• Grabbable Media Card Darken on Hover
• Dark Overlay "Play All" on Playlist Hover
• Hover Rotate Close Icon on media card
• Icon Toggle Color for Hearts, Shuffle
• Chatbox Load Scrolled Down
• Scrolling Chatbox "pulls" to a spinning icon
• Extra classes to style "added" media cards and "user's" playlists

Things to Accomplish:

• Mobile Optimization

Implement Soundcloud

• Search
• Adjust Media Entries to contain Soundcloud as a mediaType
• Add Soundcloud into MediaPlayer.jsx
• Client side done in soundcloud.js

Computer environment need to be set up to properly run the server. Things needed:

• Nodejs
• React
• Browserify
• etc.

Also: pull from master and push design and backend branches into master.

8/3/16

There should be some image or indicator that the Queue currently has no media entries. Once there are media entries pushed into the queue, removes the indicator.

EDIT: We are no longer using the plyr plugin. Build a custom Video Player UI that includes

• play/pause button
• skip to next button
• volume track
• theater mode
• full screen
• video progress track

Main Video/Media Player should have a custom design built on top of plyr.js

• go into the css/js and customize the layout and design

Design a footer for the pages

• must be sticky despite page content (use neg-margin/push hack)
• use bootstrap col so we can add content later
• perhaps add a donation button here

• Youtube
  • Can initialize Youtube player
  • Initializes player from when room is entered
  • Play/Pause between all Clients
  • Adjust Volume
  • Seek to proper time for all Clients when seekTo() is called

8/2/16

• Youtube Player is mostly done for now.
• Needs to be initialized for when the room is entered
• Change the Youtube player to load the video instead of reinitializing the video everytime a media player is changed.
• Also needs to set the proper time when seekTo() is called.

Playlist tabs contains all of the playlists that you made public, made private, and liked.

Playlists should contain media entries.

8/7/16

When multiple clients are nearly identical with their syncs and end at the same, each one of the clients may send a "From Client: Load media entry" to the server, forcing multiple calls to Load the next media entry from the queue. This causes multiple media entires in the queue to load onto the media player without getting played at all, skipping them entirely. The task is to have only one client call the server for a new media entry from the queue. by either keeping checks on the client or server sides.

Currently thinking in doing it on the server side to prevent the calls back to the clients. This way may be the better choice as it seems difficult to keep track when only 1 client ends from the client side.s

Create Search Tab:

• search bar with bootstrap dropdown
• dropdown should have social media icons next to their names (youtube, vimeo, soundcloud, spotify)
• searched media entries should be styled in cards (img, title, artist, media-type)
• icons (add to queue, play now, add to playlist)

8/21/16

Updated the command to watchify, which updates the files whenever a file in the views are updated.

Also added the -v into the end of the command, this logs to the terminal of the changes.

watchify ./public/main.js -o ./public/bundle.js -t [ babelify --presets [ es2015 react ] ] --extension=.jsx -v

7/30/16

Research Browserify to do it properly or efficiently. Either by having it called the code or having a different command through the terminal.

Currently unsure if calling the command below is efficient or the correct way in doing it.

browserify ./public/main.js -o ./public/bundle.js -t [ babelify --presets [ es2015 react ] ] --extension=.jsx

But this works.

8/3/16

Initializes the queue when a new client enters the room. Emits a socket to the server sending the queue list back to the client, which is displayed onto the queue.

Make the main page optimized to tablets and mobile phones.

8/3/16

When the delete button for the queue's media entry is clicked on, delete the media entry off of the queue

8/3/16

Makes the media entries in the queue draggable. Once dragged, updates the queue to the server and to every other client currently in the room.

Implement Vimeo

• Search Vimeo Videos
• Adjust Media Entries to contain Vimeo as a mediaType
• Add Vimeo into MediaPlayer.jsx
• Client side done in vimeo.js

8/3/16

When there is no medias playing, the media player should have some sort of image or indicator that there is currently no media queued up to play.

Create the Queue List:

• Header — Title, shuffle icon, heart icon, clear-list icon
• Each media (video or song) organized neatly into a card div with img, title, artist, and icons
• User Added Media appears with blue background, not grey
• Media Cards must be Grabbable and Arrangeable

-First Card should have a "playing now" overlay

• Include number system

Create a bootstrap nav-tabs:

• Playlist Cards (with img, title, curator, playlist-size-pill, heart-icon)
• User's Playlist Cards (bg-color blue, curator says "Your Playlist", public/private status icon instead of heart)
• Explore Tab
  • Search Bar
  • 4 column grid layout - Public Playlists
    -My Playlists Tab
  • Search Bar
  • same grid layout - Private Playlists and "Liked" Public Playlists

Create Tab Pages for:

• Open Playlist (when you click on a public playlist's title)
  -Header
  • Back Btn, Title, Curator (link)
  • playlist-size-pill, social-media-icons, Like button, # of likes
    -Search Bar
  • 2 column grid for static media cards (same as queue, undraggable)
• Edit Playlist (when you click on your playlist's title)
  • Toolbar - Save/Cancel (disabled by default), Private Indicator Dropdown, Trash Button (red hover)
  • Header is the same as open playlist, except curator name is you, and hearts cannot be clicked
  • Search Bar
  • 2 column grid, same as open-playlist except has "added" class, similar to queue, background turns blue and "x" remove button on corner

Implement UI details:

• Tooltips for icons and buttons that need explanation
• Dropdown of playlists when clicking icon to add media to a playlist
• Room Title and Edit Playlist Text Field should be editable on click and icon activation
• Pagination for Queue and every Tab that needs it

Thinking in using Mocha or Chai for unit testing. Come up with a great way to test everything through unit or integration testing.

Need to generate a database of users and playlists.

-Users should have lists of playlists
-Playlists should have lists of media entries

Need to talk about Pros and Cons of which Database(s) to use.

Finish entire Backend for the App:

• Implement the MediaPlayer
  • Added Youtube
  • Added Soundcloud
  • Added Vimeo
  • Added Status Bar
    • Added Play/Pause button
    • Include an input slider for seekTo()
    • Include a volume slider
  • Transition from one media player to the other
  • Update media player when Media changes
    • When current media ends, gets next media from queue
    • When a new media is manually selected to play
• Youtube
  • Can initialize Youtube player
  • Initializes player from when room is entered
  • Play/Pause between all Clients
  • Adjust Volume
  • Seek to proper time for all Clients when seekTo() is called
• Soundcloud
  • Can initialize Soundcloud player
  • Initializes player from when room is entered
  • Play/Pause between all Clients
  • Adjust Volume
  • Seek to proper time for all Clients when seekTo() is called
• Vimeo
  • Can initialize Vimeo player
  • Initializes player from when room is entered
  • Play/Pause between all Clients
  • Adjust Volume
  • Seek to proper time for all Clients when seekTo() is called
• Syncing
  • Optimize syncing
  • Fix General syncing bugs
    • When users click on play or pause multiple times in a short period of time
    • Ensure that calls made to server are only made by one Client and not all of the clients
  • Able to Play all Clients
  • Able to Pause all Clients
  • Updates Queue
    • When media entry is dragged
    • When a new media entry is added
    • When a media entry is removed
• Chat System
  • Change from Javascript/Jquery to using React
  • Send messages to Server and back to all Clients
  • Display when users join chat
  • Display when users leave
  • Display total users in room
  • Display users currently live in room
• Queue
  • Initializes queue to the server's queue
  • Prevents duplicates from being added to queue
  • Add the shuffle button
  • Add the like button in queue
  • Display number of added media entries
  • Display total media entries added from a playlist
  • Update queue when media player requests next song
  • Updates queue when dragging media entries and their positions
• Explore Tab
  • Connect to database for list of playlists
  • Create the entire algorithm and design structure for the exploration (Machine learning, playlist rankings, combination of both)
  • Display each media entries in a playlist when playlist is opened (Explore tab)
  • Able to open selected playlist to display medias (Explore tab)
• My Playlist Tab
  • Connect to database
  • Display current user's private playlists
  • Display current user's public playlists
  • Display current user's liked public playlists
  • Display each media entries in a playlist when playlist is opened (My Playlist tab)
  • Able to add selected playlist to queue (My Playlist tab)
• Selected Playlist
  • Display all media entries in current playlist
  • Media entries are draggable
  • Media Entry can be added to Queue button
  • Media Entry can be manually selected to play button
  • Media Entry can be added to a user's own playlist
• Search
  • Searches with Youtube API
  • Searches Soundcloud API
  • Searches VImeo API
  • Media Entry can be added to Queue button
  • Media Entry can be manually selected to play button
  • Media Entry can be added to a user's own playlist

8/2/16

Need to update the elapsed time whenever a client seeksTo() a new time on the video. Sends to server that time has changed and updates every client's elapsed time to the new time.

• Queue
  • Initializes queue to the server's queue
  • Prevents duplicates from being added to queue
  • Add the shuffle button
  • Add the like button in queue
  • Display number of added media entries
  • Display total media entries added from a playlist
  • Update queue when media player requests next song
  • Updates queue when dragging media entries and their positions

7/30/16

• Queue is currently draggable.
• Queue is updated in server whenever the queue is changed on the client side.