Refactor more, fix and design 404

This commit is contained in:
Jonathan Cremin 2015-08-21 18:33:50 +01:00
parent 7de374e00b
commit 8521baa6d9
11 changed files with 223 additions and 138 deletions

23
app.js
View file

@ -16,33 +16,14 @@ import share from './routes/share';
import itunesProxy from './routes/itunes-proxy';
import { routes } from './views/app';
import createHandler from './lib/react-handler';
import errorHandler from './lib/error-handler';
import debuglog from 'debug';
const debug = debuglog('match.audio');
const app = koa();
app.use(function* (next) {
this.set('Server', 'Nintendo 64');
try {
yield next;
} catch (err) {
if (!err.status) {
debug('Error: %o', err);
throw err;
} else if (err.status === 404) {
let Handler = yield createHandler(routes, this.request.url);
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
} else {
debug('Error: %o', err);
throw err;
}
}
});
app.use(errorHandler(routes));
app.use(bodyparser());
app.use(compress({flush: zlib.Z_SYNC_FLUSH }));

48
lib/error-handler.js Normal file
View file

@ -0,0 +1,48 @@
import React from 'react';
import createHandler from './react-handler';
import debuglog from 'debug';
const debug = debuglog('match.audio');
export default function (routes) {
return function* (next) {
this.set('Server', 'Nintendo 64');
try {
yield next;
} catch (err) {
if (err.status === 404) {
let Handler = yield createHandler(routes, this.request.url);
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
} else {
debug('Error: %o', err);
throw err;
}
}
if (404 != this.status) return;
switch (this.accepts('html', 'json')) {
case 'html':
this.type = 'html';
let Handler = yield createHandler(routes, this.request.url);
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
break;
case 'json':
this.body = {
message: 'Page Not Found'
};
break;
default:
this.type = 'text';
this.body = 'Page Not Found';
}
}
}

View file

@ -4,10 +4,13 @@ import request from 'superagent';
import 'superagent-bluebird-promise';
import { match as urlMatch } from './url';
export let id = "xbox";
import debuglog from 'debug';
const debug = debuglog('match.audio:xbox');
export let id = 'xbox';
if (!process.env.XBOX_CLIENT_ID || !process.env.XBOX_CLIENT_SECRET) {
console.warn("XBOX_CLIENT_ID and XBOX_CLIENT_SECRET environment variables not found, deactivating Xbox Music.");
console.warn('XBOX_CLIENT_ID and XBOX_CLIENT_SECRET environment variables not found, deactivating Xbox Music.');
}
const credentials = {
@ -15,12 +18,12 @@ const credentials = {
clientSecret: process.env.XBOX_CLIENT_SECRET
};
const apiRoot = "https://music.xboxlive.com/1/content";
const apiRoot = 'https://music.xboxlive.com/1/content';
function* getAccessToken() {
const authUrl = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
const scope = "http://music.xboxlive.com";
const grantType = "client_credentials";
const authUrl = 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13';
const scope = 'http://music.xboxlive.com';
const grantType = 'client_credentials';
const data = {
client_id: credentials.clientId,
@ -28,7 +31,7 @@ function* getAccessToken() {
scope: scope,
grant_type: grantType
};
const result = yield request.post(authUrl).send(data).set('Content-type', 'application/x-www-form-urlencoded').promise();
const result = yield request.post(authUrl).timeout(10000).send(data).set('Content-type', 'application/x-www-form-urlencoded').promise();
return result.body.access_token;
}
@ -39,16 +42,16 @@ function formatResponse(res) {
} else {
result = res.body.Albums.Items[0];
}
let item = {
service: "xbox",
type: res.body.Tracks ? "track" : "album",
const item = {
service: 'xbox',
type: res.body.Tracks ? 'track' : 'album',
id: result.Id,
name: result.Name,
streamUrl: result.Link,
purchaseUrl: null,
artwork: {
small: result.ImageUrl.replace("http://", "https://") + "&w=250&h=250",
large: result.ImageUrl.replace("http://", "https://") + "&w=500&h=250"
small: result.ImageUrl.replace('http://', 'https://') + '&w=250&h=250',
large: result.ImageUrl.replace('http://', 'https://') + '&w=500&h=250'
},
artist: {
name: result.Artists[0].Artist.Name
@ -60,43 +63,60 @@ function formatResponse(res) {
return item;
}
function* apiCall(path) {
const access_token = yield getAccessToken();
return request.get(apiRoot + path).timeout(10000).set('Authorization', 'Bearer ' + access_token).promise();
}
export const match = urlMatch;
export function* parseUrl(url) {
const parsed = parse(url);
const parts = parsed.path.split("/");
const parts = parsed.path.split('/');
const type = parts[1];
const idMatches = parts[4].match(/[\w\-]+/);
const id = idMatches[0];
if (!id) {
return false;
}
return yield lookupId("music." + id, type);
return yield lookupId('music.' + id, type);
}
export function* lookupId(id, type) {
const access_token = yield getAccessToken();
const path = "/" + id + "/lookup";
const result = yield request.get(apiRoot + path).set("Authorization", "Bearer " + access_token).promise();
return result ? formatResponse(result) : {service: "xbox"};
const path = '/' + id + '/lookup';
try {
const result = yield apiCall(path);
return formatResponse(result);
} catch (e) {
if (e.status !== 404) {
debug(e.body);
}
return {service: 'xbox'};
}
};
export function* search(data) {
var cleanParam = function(str) {
return str.replace(/[\:\?\&]+/, "");
return str.replace(/[\:\?\&\(\)\[\]]+/g, '');
}
let query, album;
const type = data.type;
if (type == "album") {
query = cleanParam(data.artist.name.substring(0, data.artist.name.indexOf('&'))) + " " + cleanParam(data.name);
if (type == 'album') {
query = cleanParam(data.artist.name.substring(0, data.artist.name.indexOf('&'))) + ' ' + cleanParam(data.name);
album = data.name;
} else if (type == "track") {
query = cleanParam(data.artist.name.substring(0, data.artist.name.indexOf('&'))) + " " + cleanParam(data.name);
} else if (type == 'track') {
query = cleanParam(data.artist.name.substring(0, data.artist.name.indexOf('&'))) + ' ' + cleanParam(data.name);
album = data.album.name
}
const access_token = yield getAccessToken();
const path = "/music/search?q=" + encodeURIComponent(query) + "&filters=" + type + "s";
const result = yield request.get(apiRoot + path).set("Authorization", "Bearer " + access_token).promise()
return result ? formatResponse(result) : {service: "xbox"};
const path = '/music/search?q=' + encodeURIComponent(query) + '&filters=' + type + 's';
try {
const result = yield apiCall(path);
return formatResponse(result);
} catch (e) {
if (e.status !== 404) {
debug(e.body);
}
return {service: 'xbox'};
}
};

View file

@ -6,6 +6,6 @@ export function* match(url, type) {
return false;
}
const parts = parsed.path.split("/");
return (parts[1] == "album" || parts[1] == "track") && parts[4];
const parts = parsed.path.split('/');
return (parts[1] == 'album' || parts[1] == 'track') && parts[4];
};

View file

@ -7,9 +7,9 @@ const credentials = {
key: process.env.YOUTUBE_KEY,
};
const apiRoot = "https://www.googleapis.com/freebase/v1/topic";
const apiRoot = 'https://www.googleapis.com/freebase/v1/topic';
export function* get(topic) {
const result = yield request.get(apiRoot + topic + "?key=" + credentials.key).promise();
const result = yield request.get(apiRoot + topic + '?key=' + credentials.key).promise();
return result.body;
}

View file

@ -6,6 +6,9 @@ import 'superagent-bluebird-promise';
import { match as urlMatch } from './url';
import freebase from './freebase';
import debuglog from 'debug';
const debug = debuglog('match.audio:youtube');
module.exports.id = 'youtube';
if (!process.env.YOUTUBE_KEY) {
@ -37,55 +40,58 @@ export function parseUrl(url) {
export function* lookupId(id, type) {
const path = '/videos?part=snippet%2CtopicDetails%2CcontentDetails&id=' + id + '&key=' + credentials.key;
const result = yield request.get(apiRoot + path).promise();
const item = res.body.items[0];
if (!item.topicDetails.topicIds) {
return {service: 'youtube'};
}
const promises = [];
const match = {
id: id,
service: 'youtube',
name: item.snippet.title,
type: 'track',
album: {name: ''},
streamUrl: 'https://youtu.be/' + id,
purchaseUrl: null,
artwork: {
small: item.snippet.thumbnails.medium.url,
large: item.snippet.thumbnails.high.url,
try {
const result = yield request.get(apiRoot + path).promise();
const item = result.body.items[0];
if (!item.topicDetails.topicIds) {
return {service: 'youtube'};
}
};
for (let topic of yield freebase.get(topicId)) {
const musicalArtist = topic.property['/type/object/type'].values.some((value) => {
return value.text == 'Musical Artist';
});
const musicalRecording = topic.property['/type/object/type'].values.some(function(value) {
return value.text == 'Musical Recording';
});
const musicalAlbum = topic.property['/type/object/type'].values.some(function(value) {
return value.text == 'Musical Album';
})
if (musicalArtist) {
match.artist = {name: topic.property['/type/object/name'].values[0].text};
} else if (musicalRecording) {
match.name = topic.property['/type/object/name'].values[0].text;
if (topic.property['/music/recording/releases']) {
match.type = 'album';
match.album.name = topic.property['/music/recording/releases'].values[0].text;
const match = {
id: id,
service: 'youtube',
name: item.snippet.title,
type: 'track',
album: {name: ''},
streamUrl: 'https://youtu.be/' + id,
purchaseUrl: null,
artwork: {
small: item.snippet.thumbnails.medium.url,
large: item.snippet.thumbnails.high.url,
}
};
for (let topic of yield freebase.get(topicId)) {
const musicalArtist = topic.property['/type/object/type'].values.some((value) => {
return value.text == 'Musical Artist';
});
const musicalRecording = topic.property['/type/object/type'].values.some(function(value) {
return value.text == 'Musical Recording';
});
const musicalAlbum = topic.property['/type/object/type'].values.some(function(value) {
return value.text == 'Musical Album';
})
if (musicalArtist) {
match.artist = {name: topic.property['/type/object/name'].values[0].text};
} else if (musicalRecording) {
match.name = topic.property['/type/object/name'].values[0].text;
if (topic.property['/music/recording/releases']) {
match.type = 'album';
match.album.name = topic.property['/music/recording/releases'].values[0].text;
}
} else if (musicalAlbum) {
match.name = topic.property['/type/object/name'].values[0].text;
match.type = 'album';
}
} else if (musicalAlbum) {
match.name = topic.property['/type/object/name'].values[0].text;
match.type = 'album';
}
return match;
} catch (e) {
debug(e.body);
return {'service': 'youtube'};
}
return match;
};
export function* search(data) {
@ -101,7 +107,6 @@ export function* search(data) {
}
const path = '/search?part=snippet&q=' + encodeURIComponent(query) + '&type=video&videoCaption=any&videoCategoryId=10&key=' + credentials.key;
const result = yield request.get(apiRoot + path).promise();
const item = result.body.items[0];

View file

@ -214,38 +214,36 @@ h3 {
margin-bottom: 7px;
}
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
.error {
background: #FE4365;
color: #febdc9;
}
.error h1, .error h2 {
font-weight: 300;
text-align: center;
font-weight: 100;
}
.error .main h1 {
font-size: 2em;
margin-bottom: 50px;
margin-bottom: 20px;
color: #fff;
}
.error h2 {
color: #ff7c94;
font-size: 4em;
margin-top: 50px;
margin-top: 0px;
margin-bottom: 20px;
}
.error a {
color: #fff;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}

View file

@ -3,6 +3,9 @@ import co from 'co';
import lookup from '../lib/lookup';
import services from '../lib/services';
import debuglog from 'debug';
const debug = debuglog('match.audio:search');
module.exports = function* () {
const url = parse(this.request.body.url);
this.assert(url.host, 400, {error: {message: 'You need to submit a url.'}});
@ -26,17 +29,21 @@ module.exports = function* () {
yield this.db.matches.save({_id: item.service + '$$' + item.id, 'created_at': new Date(), services: matches});
this.body = item;
process.nextTick(co.wrap(function* (){
process.nextTick(() => {
for (let service of services) {
if (service.id === item.service) {
continue;
}
matches[service.id] = {service: service.id};
const match = yield service.search(item);
match.matched_at = new Date(); // eslint-disable-line camelcase
const update = {};
update['services.' + match.service] = match;
yield this.db.matches.updateOne({_id: item.service + '$$' + item.id}, {'$set': update});
co(function* (){
const match = yield service.search(item);
match.matched_at = new Date(); // eslint-disable-line camelcase
const update = {};
update['services.' + match.service] = match;
yield this.db.matches.updateOne({_id: item.service + '$$' + item.id}, {'$set': update});
}.bind(this)).catch((err) => {
debug(err);
});
}
}.bind(this)));
});
};

View file

@ -31,15 +31,13 @@ export default function* (serviceId, type, itemId, format, next) {
const shares = formatAndSort(doc.services, serviceId);
if (format === 'json') {
this.body = {shares: shares};
} else {
const Handler = yield createHandler(routes, this.request.url);
const App = React.createFactory(Handler);
let content = React.renderToString(new App({shares: shares}));
content = content.replace('</body></html>', '<script>var shares = ' + JSON.stringify(shares) + '</script></body></html>');
this.body = '<!doctype html>\n' + content;
return this.body = {shares: shares};
}
const Handler = yield createHandler(routes, this.request.url);
const App = React.createFactory(Handler);
let content = React.renderToString(new App({shares: shares}));
content = content.replace('</body></html>', '<script>var shares = ' + JSON.stringify(shares) + '</script></body></html>');
this.body = '<!doctype html>\n' + content;
};

View file

@ -5,6 +5,7 @@ import Home from './home';
import Share from './share';
import Head from './head';
import ErrorView from './error';
import NotFound from './notfound';
const App = React.createClass({
render: function () {
@ -27,7 +28,7 @@ const routes = (
<Route name='home' handler={App} path='/'>
<DefaultRoute handler={Home} />
<Route name='share' path=':service/:type/:id' handler={Share}/>
<NotFoundRoute handler={ErrorView}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);

27
views/notfound.js Normal file
View file

@ -0,0 +1,27 @@
import React from 'react';
import Head from './head';
import Foot from './foot';
export default React.createClass({
render: function() {
return (
<html>
<Head {...this.props} />
<body>
<div className='error vertical-center'>
<div className='container main'>
<div className='row'>
<div className='col-md-12'>
<h2>404</h2>
<h1>Sorry, it looks like the page you asked for is gone.</h1>
<a href='/'>Take Me Home</a> or <a href='https://www.youtube.com/watch?v=gnnIrTLlLyA' target='_blank'>Show Me the Wubs</a>
</div>
</div>
</div>
</div>
</body>
</html>
);
}
});