Motivation

User can see all past highlights in one easy-to-navigate location.

Implementation

• Restructure data to one collection with more information associated to each object

• Rewrite function that assigns length to be more accurate to highlight moment

• Create function to search database for associated highlights

• Create function to return array sorted by date/player/increase

• Create function to append stream dates of highlights to page

• Create function to append embedded highlights based on selected stream

Motivation

Provide a more efficient, user friendly way to view highlights.

Implementation

• Embed livestream on channel page
  • Create channel-embed.js
  • Generate Twitch Player from channel name
• Display one embeded VOD, and seek time of individual highlights
• Keep track of which highlights have been viewed
• Skip to non-viewed highlights

Motivation

A user interface that is familiar for Twitch users.

Implementation

• Separate stylesheets by app
• Link stylesheets in index.html
• Redesign styles to be similar to Twitch
  • Update navbar styles
    • Place title header inside button
    • Create method handleTitleClick
  • Update sidebar styles
  • Update channel styles
  • Update highlight styles
  • Update search styles
• Animate Sidebar
  • Add position:absolute to sidebar-div id
  • Create sidebar-visible classe
  • Update handleMenuClick method to change between classes
  • Add transition property to sidebar-div
• Add media query to title button if it overlaps with search function

Implementation

• Separation of Concerns
  • Create create-app.js and move code relating to routes
  • Create highlights-gateway.js and move code relating to the highlight database
  • Create chat-gateway.js and move code relating to chat monitoring
  • Create chat-algorithm.js and move code relating to the chat highlight algorithm

Motivation

User has a more organized way to view the highlights they are interested in.

Implementation

• Add sort function to find method in highlights-gateway.js
• Add function to render divs based on different dates in highlights-list.js
• Update embedHighlights function to handle 2D array
• Change date property from string to date object
• Add dateformat as dependency
• Call dateFormat function on date property
• Move highlightEmbed function to client/highlight-embed.js
• Move highlightSort function to client/highlight-sort.js
• Create function to sort stream arrays by increase property

Motivation

User will have a simple way to navigate to a desired channel.

Implementation

• Create navbar-app.js
• Create sidebar-app.js
• Add semanticUI scripts
• Add menu button in navbar-app that reveals sidebar
• Add search-app to navbar-app
• Add function to update hash based on channel
• Add functions to handle new hash
• Add function to render buttons in sidebar for followed channels
• Add route to '/channels' to find followed channels
• Add styling

Motivation

User can monitor a channel for increased chat activity and create clips at appropriate times

Implementation

• Install and add tmi.js as a dependency

• Install and add mongoDB as a dependency

• Create function to check if stream is online

• Create function to add # of chat occurrences in last 10 seconds to mongoDB, only keeping the last minute of data.

• Create function to append button on page based on stream status.

• Send request to server on button press

• Create function to analyze the text log for fluctuations

Motivation

Only capture highlights which are truly highlights.

Implementation

• Reset chatLog if subscriber mode is disabled
• Reset chatLog if slow mode is disabled
• Reset chatLog if followers only mode is disabled
• Reset chatLog if highlight is captured
• Set time of highlight to 50 seconds before highlight is captured

Implementation

• Add Babel as devDependency
• Add React as dependency
• Add scripts for Babel
• Add babel config file
• Add browser sync config file
• Add watch scripts
• Move main.js to client/index.js
• Update find method to search for channel property
• Create app.js
• Move search functionality to client/search-app.js
• Move channel display functionality to client/channel-app.js
• Move highlight retrieval functionality to client/highlight-app.js
• Create React function to generate divs based on retrieved highlights.
• Call embedHighlight function inside of fetchHighlight function if the highlight array is changed
• Add autoplay and time properties to embedOptions object
• Return all highlights if no channel is selected

Motivation

User can see all the best moments on one page

Implementation

• Create function to find the VOD associated with current stream

• Create function to generate VOD embed based on highlight moment

• Create function to add highlight moments reference to database

• Create function to poll for new highlights

• Create function to append highlights to page

Motivation

User can login with their Twitch account to see personally curated highlight lists.

Implementation

• Install jsonwebtoken as a dependency
• Create function TwitchAuth
  • Add link to authorization page
  • Validate returned token
  • Decode token
  • Create new cookie with user-id key
  • Send POST request to /users to create new user
  • Call function addUser to change newUser state
• Create usersGateway
  • Declare users collection
  • Declare usersGateway and pass as argument to createApp and createSocket
  • Declare method addUser
  • Declare method getUser
  • Export function usersGateway
  • Add conditional to addUser to not add if user exists
• Add POST route to /users
• Return TwitchAuth or full site based on newUser state
• Update data model to support multiple users
  • Users Collection
    • Add channelArray property to user object upon creation
    • Create addChannel method in usersGateway
    • Update /channels route to call users.addChannel
    • Update createSocket to handle userObject
  • Update channelFetch to handle both id and username
  • Update channelMonitor to send userId & channel id in request body
  • Channels Collection
    • Update channelsGateway to handle the server channelArray
    • Monitor all channels from channelArray on server start
  • Highlights Collection
    • Update highlightsGateway
      • Create findChannel method
      • Create addChannel method
      • Update createHighlight method
      • Update findHighlights method
    • Update highlightsApp
      • Update handleNewHash to set channel state to array containing channel
      • On homepage, show most recent highlights from followed channels

Motivation

User can input a twitch channel, and see a list of who that user is following

Implementation

• Get Access to Twitch API.

• Add index.html, styles.css, and main.js to twitch-auto-highlight/ and link them together

• Add header and search element to index.html

• Create function that takes the search value and returns the relevant Twitch channel

• Create function to append an element with the return value of the previous function

• Style with CSS

• Install dependencies
  • socket.io
  • socket.io-client
• Replace channelList with websocket
  • Remove channelList state from navbar-app
  • Remove fetch to /channels in handleClick function in navbar-app
  • Remove prop channelList from being passed to SidebarApp
  • Remove componentWillReceiveProps from sidebar-app
  • Create updateChannelListData method
  • Import socket-io.client and declare socket constant
  • Add componentDidMount method
    • Fetch channelList and pass to updateChannelListData method
    • Add socket listener for 'updateChannelList' and call updateChannelList method
  • Create create-socket.js
    • Define function createSocket
    • Export function createSocket
  • Declare constant createSocket
  • Declare constant server and pass as argument to createSocket
  • Declare constants EventEmitter and evenEmitter
  • Pass eventEmitter as argument to gateways and createSocket
  • Add event listener for updateChannelList
  • Emit event updateChannelList with newChannelList
• Replace highlightFetch with websocket
  • Remove state intervalID and associated methods
  • Create handleNewHash method
    • Set channel state to hash
    • Emit highlightListChange event with state channel
  • Create componentDidMount method
    • Call updateHighlightArray
    • Add event listener for hash change to call handleNewHash method
    • Add socket listener for highlightArrayUpdate that sets new highlightArray state
  • Pass channel state as argument to highlightFetch
  • Add socket listener for highlightArrayChange
    • Find highlights and declare variable highlightArray
    • Emit highlightArrayUpdate with higlightArray