Skip to content
This repository has been archived by the owner on Oct 11, 2022. It is now read-only.

Commit

Permalink
Use TMDB API to get the images
Browse files Browse the repository at this point in the history
  • Loading branch information
tegon committed Oct 12, 2016
1 parent 9aace1c commit 0ed1509
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 28 deletions.
9 changes: 7 additions & 2 deletions app/scripts/src/history-sync/components/activity-list-item.js
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import ActivityActionCreators from '../actions/activity-action-creators';
import TraktURLForm from './trakt-url-form';
import TraktWebAPIUtils from '../utils/trakt-web-api-utils';
import TmdbImage from '../../tmdb-image';

export default class ActivityListItem extends React.Component {
constructor() {
Expand Down Expand Up @@ -41,13 +42,17 @@ export default class ActivityListItem extends React.Component {
traktTitle = trakt.show ? `${trakt.show.title}: ${trakt.title}` : trakt.title;
}

let thumb = traktImage && traktImage.thumb ? traktImage.thumb : 'https://trakt.tv/assets/placeholders/thumb/poster-2d5709c1b640929ca1ab60137044b152.png';
let formId = `${netflix.id}--add`;

return(
<li className='mdl-list__item mdl-list__item--three-line'>
<span className='mdl-list__item-primary-content'>
<div style={{backgroundImage: `url(${thumb})`, backgroundSize: 'cover'}} className='mdl-list__item-avatar'></div>
<TmdbImage
className='mdl-list__item-avatar'
item={trakt}
imageHost={this.props.imageHost}
imageWidth={this.props.imageWidth}
/>
<span><a href={netflixUrl} target='_blank'>Netflix title: {netflixTitle}</a></span>
<span> / </span>
<span><a href={traktUrl} target='_blank'>Trakt.tv title: {traktTitle}</a></span>
Expand Down
13 changes: 11 additions & 2 deletions app/scripts/src/history-sync/components/activity-list.js
Expand Up @@ -4,8 +4,17 @@ import ActivityListItem from './activity-list-item';

export default class ActivityList extends React.Component {
render() {
let items = this.props.activities.map((activity, index) => {
return(<ActivityListItem activity={activity} key={index} componentHandler={componentHandler} />);
let {activities, imageHost, imageWidth} = this.props;
let items = activities.map((activity, index) => {
return(
<ActivityListItem
activity={activity}
key={index}
componentHandler={componentHandler}
imageHost={imageHost}
imageWidth={imageWidth}
/>
);
});

return(
Expand Down
Expand Up @@ -4,6 +4,7 @@ import ActivityList from './activity-list';
import ActivityStore from '../stores/activity-store';
import TraktWebAPIUtils from '../utils/trakt-web-api-utils';
import NetflixWebAPIUtils from '../utils/netflix-web-api-utils';
import TmdbImageContainer from '../../tmdb-image-container.js';

export default class ViewingActivityApp extends React.Component {
getStateFromStores() {
Expand Down Expand Up @@ -79,7 +80,9 @@ export default class ViewingActivityApp extends React.Component {
<span className='mdl-switch__label'>Select all</span>
</label>
</span>
<ActivityList activities={this.state.activities} />
<TmdbImageContainer>
<ActivityList activities={this.state.activities} />
</TmdbImageContainer>
<div style={{textAlign: 'center'}}>
<button onClick={this._onSyncClick.bind(this)} className='mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect'>
Sync now
Expand Down
30 changes: 11 additions & 19 deletions app/scripts/src/popup/components/watching.js
@@ -1,30 +1,22 @@
'use strict';

var React = require('react');
var TmdbImageContainer = require('../../tmdb-image-container.js');
var TmdbImage = require('../../tmdb-image.js');

module.exports = React.createClass({
thumbUrl: function() {
if (this.props.item.images.poster) {
return this.props.item.images.poster.thumb;
} else {
return this.props.item.images.screenshot.thumb;
}
},
thumbStyle: function() {
return {
backgroundImage: 'url(' + this.thumbUrl() + ')'
}
},
render: function() {
chrome.runtime.sendMessage({ type: 'sendAppView', view: 'Watching ' + this.props.item.title });

return(
<div className='mdl-card mdl-shadow--2dp watching-card-thumb' style={this.thumbStyle()}>
<div className='mdl-card__title mdl-card--expand'></div>
<div className='mdl-card__actions'>
<span className='watching-card-thumb__title'>{this.props.item.title}</span>
</div>
</div>
<TmdbImageContainer>
<TmdbImage className='mdl-card mdl-shadow--2dp watching-card-thumb' item={this.props.item}>
<div className='mdl-card__title mdl-card--expand'></div>
<div className='mdl-card__actions'>
<span className='watching-card-thumb__title'>{this.props.item.title}</span>
</div>
</TmdbImage>
</TmdbImageContainer>
);
}
});
});
3 changes: 2 additions & 1 deletion app/scripts/src/settings.js
Expand Up @@ -6,5 +6,6 @@ module.exports = {
clientSecret: '@@clientSecret',
apiVersion: 2,
analyticsId: '@@analyticsId',
rollbarToken: '@@rollbarToken'
rollbarToken: '@@rollbarToken',
tmdbApiKey: '@@tmdbApiKey'
};
38 changes: 38 additions & 0 deletions app/scripts/src/tmdb-image-container.js
@@ -0,0 +1,38 @@
'use strict';

var React = require('react');
var Settings = require('./settings.js');

module.exports = React.createClass({
getInitialState: function() {
return {
imageHost: null,
imageWidth: {
show: null,
movie: null
}
}
},
componentDidMount: function() {
fetch('https://api.themoviedb.org/3/configuration?api_key=' + Settings.tmdbApiKey).then(this.parseJsonResponse).then(this.onConfigLoaded);
},
parseJsonResponse: function(response) {
return response.json();
},
onConfigLoaded: function(response) {
this.setState({
imageHost: response.images.secure_base_url,
imageWidth: { show: response.images.still_sizes[2], movie: response.images.poster_sizes[2] }
});
},
render: function() {
return(
<div>
{this.props.children && React.cloneElement(this.props.children, {
imageHost: this.state.imageHost,
imageWidth: this.state.imageWidth
})}
</div>
);
}
});
79 changes: 79 additions & 0 deletions app/scripts/src/tmdb-image.js
@@ -0,0 +1,79 @@
'use strict';

var React = require('react');
var Settings = require('./settings.js');

module.exports = React.createClass({
getInitialState: function() {
return {
imageUrl: 'https://trakt.tv/assets/placeholders/thumb/poster-2d5709c1b640929ca1ab60137044b152.png'
}
},
componentDidMount: function() {
if (this.props.item && this.props.imageHost) {
this.getItemFromTmdb();
}
},
componentDidUpdate: function(prevProps) {
var shouldUpdate = false;

if (!prevProps.item && this.props.item) {
shouldUpdate = true;
} else if (prevProps.item && this.props.item) {
if (prevProps.imageHost !== this.props.imageHost) {
shouldUpdate = true;
} else if (prevProps.item.ids.tmdb !== this.props.item.ids.tmdb) {
shouldUpdate = true;
} else if (prevProps.item.show && this.props.item.show && prevProps.item.show.ids.tmdb !== this.props.item.show.ids.tmdb) {
shouldUpdate = true;
}
}

if (shouldUpdate) {
this.getItemFromTmdb();
}
},
getItemFromTmdb: function() {
fetch(this.getApiUrl()).then(this.parseJsonResponse).then(this.onItemLoaded);
},
getApiUrl: function() {
var type = this.props.item.type === 'show' ? 'tv' : 'movie';
var path = this.props.item.ids.tmdb;

if (this.props.item.type === 'show') {
path = this.props.item.show.ids.tmdb + '/season/' + this.props.item.season + '/episode/' + this.props.item.number;
}

return 'https://api.themoviedb.org/3/' + type + '/' + path + '/images?api_key=' + Settings.tmdbApiKey;
},
parseJsonResponse: function(response) {
return response.json();
},
onItemLoaded: function(response) {
clearTimeout(this.requestTimeout);

if (response.status_code && response.status_code === 25) {
// we've reached the API limit
this.onItemFailed();
} else {
var imageKey = this.props.item.type === 'show' ? 'stills' : 'posters';
this.setState({ imageUrl: this.props.imageHost + this.props.imageWidth[this.props.item.type] + response[imageKey][0].file_path });
}
},
onItemFailed: function() {
this.requestTimeout = setTimeout(this.getItemFromTmdb, 10000);
},
thumbStyle: function() {
return {
backgroundImage: 'url(' + this.state.imageUrl + ')',
backgroundSize: 'cover'
}
},
render: function() {
return(
<div className={this.props.className} style={this.thumbStyle()}>
{this.props.children}
</div>
);
}
});
6 changes: 4 additions & 2 deletions config.json.dev
Expand Up @@ -3,12 +3,14 @@
"clientId": "{TraktClientId}",
"clientSecret": "{TraktClientSecret}",
"analyticsId": "{GoogleAnalyticsId}",
"rollbarToken": "{RollbarToken}"
"rollbarToken": "{RollbarToken}",
"tmdbApiKey": "{TheMovieDatabaseApiKey}"
},
"development": {
"clientId": "{TraktClientId}",
"clientSecret": "{TraktClientSecret}",
"analyticsId": "{GoogleAnalyticsId}",
"rollbarToken": "{RollbarToken}"
"rollbarToken": "{RollbarToken}",
"tmdbApiKey": "{TheMovieDatabaseApiKey}"
}
}
3 changes: 2 additions & 1 deletion gulpfile.js
Expand Up @@ -25,7 +25,8 @@ var replacePatterns = {
{ match: 'clientId', replacement: config[options.env].clientId },
{ match: 'clientSecret', replacement: config[options.env].clientSecret },
{ match: 'analyticsId', replacement: config[options.env].analyticsId },
{ match: 'rollbarToken', replacement: config[options.env].rollbarToken }
{ match: 'rollbarToken', replacement: config[options.env].rollbarToken },
{ match: 'tmdbApiKey', replacement: config[options.env].tmdbApiKey }
]
};

Expand Down

0 comments on commit 0ed1509

Please sign in to comment.