Stream Marquee #206
Stream Marquee #206
Conversation
# Conflicts: # client/react/frontpage/components/StreamMarquee.scss
| 'https://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=uclaradio&api_key=d3e63e89b35e60885c944fe9b7341b76&limit=10&format=json'; | ||
| const streamURL = 'http://uclaradio.com:8000/;'; | ||
| let stream; | ||
| var streamURL = 'http://uclaradio.com:8000/;'; |
There was a problem hiding this comment.
Please use const and let over var. I think this happens in multiple files.
| const RecentlyPlayed = React.createClass({ | ||
| getInitialState() { | ||
| var RecentlyPlayed = React.createClass({ | ||
| getInitialState: function() { |
There was a problem hiding this comment.
What's the difference between declaring a class method as:
getInitialState() {vs
getInitialState: function() {I haven't seen the latter notation before!
There was a problem hiding this comment.
tbh same idk where any of these changes came from cuz i didn't change any of these lines for the stream marquee but ima change them back!!!
| @@ -123,7 +135,7 @@ const StreamBar = React.createClass({ | |||
| </span> | |||
| <span className="playText"> | |||
| {this.props.currentShowTitle ? ( | |||
| `LIVE: ${this.props.currentShowTitle}` | |||
| 'LIVE: ' + this.props.currentShowTitle | |||
There was a problem hiding this comment.
Please prefer string template literals to concatenation.
There was a problem hiding this comment.
^ Text is going over the stream logo. I'm on Chrome if that helps!
Also, can we make the marquee move a little a slower? It's just going a tad bit too fast.
EDIT: I realize the speed is dependent on your browser size (ie if your browser width is smaller, it moves slower). Also the place where it cuts off is browser width dependent as well. If there's anyway to not make it dependent on that I think we would be good
|
should we just not show it on mobile view? since the bar is kinda too small |
|
@jdliaw Yeah I agree. It's really small and would be impossible to read the phone number. |
| import isMobile from './misc/isMobile.js'; | ||
|
|
||
| // styling | ||
| require('./StreamBar.scss'); |
There was a problem hiding this comment.
Why not import? Keep it consistent
| @@ -174,7 +182,7 @@ const RecentlyPlayed = React.createClass({ | |||
| } | |||
| }, | |||
| truncateName(name, l) { | |||
| return name.length > l ? `${name.substr(0, l - 2)}\u2026` : name; | |||
| return name.length > l ? name.substr(0, l - 2) + '\u2026' : name; | |||
There was a problem hiding this comment.
Why not string interpolation? It's the cool new thing >.>
| <a href={track.url} target="_blank"> | ||
| {track.artist} | ||
| </a> | ||
| {this.state.recentTracks.map(function(track, i) { |
There was a problem hiding this comment.
Arrow functions are also the cool new thing
|
|
||
| import React from 'react'; | ||
|
|
||
| require('./StreamMarquee.scss'); |
There was a problem hiding this comment.
same as before, prefer import
| @prop message: message to display on the marquee | ||
| */ | ||
|
|
||
| var StreamMarquee = React.createClass({ |
There was a problem hiding this comment.
use let or better yet const
Types of changes
Purpose
Add a marquee to the stream bar to post announcements, on-air giveaways, or display the on-air/request line numbers, etc.
Approach
Created a new StreamMarquee component that takes in a message as props and uses webkit-animation to move and look nice.
Screenshot(s)
Checklist
masterwithout error.