mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Fix embeds and add default fixed height

Просмотр исходного кода
Этот коммит содержится в:
JoramWilander
2015-12-04 12:28:46 -05:00
родитель 622fbc6740
Коммит 975074b2ae
6 изменённых файлов: 153 добавлений и 80 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

35
web/react/components/post_attachment_oembed.jsx
Просмотреть файл

@@ -20,8 +20,11 @@ export default class PostAttachmentOEmbed extends React.Component {
fetchData(link) { fetchData(link) {
if (!this.isLoading) { if (!this.isLoading) {
this.isLoading = true; this.isLoading = true;
let url = 'https://noembed.com/embed?nowrap=on';
url += '&url=' + encodeURIComponent(link);
url += '&maxheight=' + this.props.provider.height;
return $.ajax({ return $.ajax({
url: 'https://noembed.com/embed?nowrap=on&url=' + encodeURIComponent(link), url,
dataType: 'jsonp', dataType: 'jsonp',
success: (result) => { success: (result) => {
this.isLoading = false; this.isLoading = false;
@@ -39,8 +42,18 @@ export default class PostAttachmentOEmbed extends React.Component {
} }
render() { render() {
let data = {};
let content;
if ($.isEmptyObject(this.state.data)) { if ($.isEmptyObject(this.state.data)) {
return <div></div>; content = <div style={{height: this.props.provider.height}}/>;
} else {
data = this.state.data;
content = (
<div
style={{height: this.props.provider.height}}
dangerouslySetInnerHTML={{__html: data.html}}
/>
);
} }
return ( return (
@@ -57,18 +70,17 @@ export default class PostAttachmentOEmbed extends React.Component {
> >
<a <a
className='attachment__title-link' className='attachment__title-link'
href={this.state.data.url} href={data.url}
target='_blank' target='_blank'
> >
{this.state.data.title} {data.title}
</a> </a>
</h1> </h1>
<div> <div >
<div className={'attachment__body attachment__body--no_thumb'}> <div
<div className={'attachment__body attachment__body--no_thumb'}
dangerouslySetInnerHTML={{__html: this.state.data.html}} >
> {content}
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -79,5 +91,6 @@ export default class PostAttachmentOEmbed extends React.Component {
} }
PostAttachmentOEmbed.propTypes = { PostAttachmentOEmbed.propTypes = {
link: React.PropTypes.string.isRequired link: React.PropTypes.string.isRequired,
provider: React.PropTypes.object.isRequired
}; };

12
web/react/components/post_body.jsx
Просмотреть файл

@@ -109,10 +109,11 @@ export default class PostBody extends React.Component {
const trimmedLink = link.trim(); const trimmedLink = link.trim();
if (this.checkForOembedContent(trimmedLink)) { const provider = this.getOembedProvider(trimmedLink);
if (provider != null) {
post.props.oEmbedLink = trimmedLink; post.props.oEmbedLink = trimmedLink;
post.type = 'oEmbed'; post.type = 'oEmbed';
this.setState({post}); this.setState({post, provider});
return ''; return '';
} }
@@ -133,15 +134,15 @@ export default class PostBody extends React.Component {
return null; return null;
} }
checkForOembedContent(link) { getOembedProvider(link) {
for (let i = 0; i < providers.length; i++) { for (let i = 0; i < providers.length; i++) {
for (let j = 0; j < providers[i].patterns.length; j++) { for (let j = 0; j < providers[i].patterns.length; j++) {
if (link.match(providers[i].patterns[j])) { if (link.match(providers[i].patterns[j])) {
return true; return providers[i];
} }
} }
} }
return false; return null;
} }
loadImg(src) { loadImg(src) {
@@ -399,6 +400,7 @@ export default class PostBody extends React.Component {
</div> </div>
<PostBodyAdditionalContent <PostBodyAdditionalContent
post={this.state.post} post={this.state.post}
provider={this.state.provider}
/> />
{fileAttachmentHolder} {fileAttachmentHolder}
{this.embed} {this.embed}

4
web/react/components/post_body_additional_content.jsx
Просмотреть файл

@@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends React.Component {
return ( return (
<PostAttachmentOEmbed <PostAttachmentOEmbed
key={'post_body_additional_content' + this.props.post.id} key={'post_body_additional_content' + this.props.post.id}
provider={this.props.provider}
link={link} link={link}
/> />
); );
@@ -68,5 +69,6 @@ export default class PostBodyAdditionalContent extends React.Component {
} }
PostBodyAdditionalContent.propTypes = { PostBodyAdditionalContent.propTypes = {
post: React.PropTypes.object.isRequired post: React.PropTypes.object.isRequired,
provider: React.PropTypes.object
}; };

156
web/react/components/providers.json
Просмотреть файл

@@ -3,265 +3,308 @@
"patterns": [ "patterns": [
"http://(?:www\\.)?xkcd\\.com/\\d+/?" "http://(?:www\\.)?xkcd\\.com/\\d+/?"
], ],
"name": "XKCD" "name": "XKCD",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://soundcloud.com/.*/.*" "https?://soundcloud.com/.*/.*"
], ],
"name": "SoundCloud" "name": "SoundCloud",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www\\.)?flickr\\.com/.*", "https?://(?:www\\.)?flickr\\.com/.*",
"https?://flic\\.kr/p/[a-zA-Z0-9]+" "https?://flic\\.kr/p/[a-zA-Z0-9]+"
], ],
"name": "Flickr" "name": "Flickr",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.ted\\.com/talks/.+\\.html" "http://www\\.ted\\.com/talks/.+\\.html"
], ],
"name": "TED" "name": "TED",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://(?:www\\.)?theverge\\.com/\\d{4}/\\d{1,2}/\\d{1,2}/\\d+/[^/]+/?$" "http://(?:www\\.)?theverge\\.com/\\d{4}/\\d{1,2}/\\d{1,2}/\\d+/[^/]+/?$"
], ],
"name": "The Verge" "name": "The Verge",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://.*\\.viddler\\.com/.*" "http://.*\\.viddler\\.com/.*"
], ],
"name": "Viddler" "name": "Viddler",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www\\.)?avclub\\.com/article/[^/]+/?$" "https?://(?:www\\.)?avclub\\.com/article/[^/]+/?$"
], ],
"name": "The AV Club" "name": "The AV Club",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www\\.)?wired\\.com/([^/]+/)?\\d+/\\d+/[^/]+/?$" "https?://(?:www\\.)?wired\\.com/([^/]+/)?\\d+/\\d+/[^/]+/?$"
], ],
"name": "Wired" "name": "Wired",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.theonion\\.com/articles/[^/]+/?" "http://www\\.theonion\\.com/articles/[^/]+/?"
], ],
"name": "The Onion" "name": "The Onion",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://yfrog\\.com/[0-9a-zA-Z]+/?$" "http://yfrog\\.com/[0-9a-zA-Z]+/?$"
], ],
"name": "YFrog" "name": "YFrog",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.duffelblog\\.com/\\d{4}/\\d{1,2}/[^/]+/?$" "http://www\\.duffelblog\\.com/\\d{4}/\\d{1,2}/[^/]+/?$"
], ],
"name": "The Duffel Blog" "name": "The Duffel Blog",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.clickhole\\.com/article/[^/]+/?" "http://www\\.clickhole\\.com/article/[^/]+/?"
], ],
"name": "Clickhole" "name": "Clickhole",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www.)?skitch.com/([^/]+)/[^/]+/.+", "https?://(?:www.)?skitch.com/([^/]+)/[^/]+/.+",
"http://skit.ch/[^/]+" "http://skit.ch/[^/]+"
], ],
"name": "Skitch" "name": "Skitch",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(alpha|posts|photos)\\.app\\.net/.*" "https?://(alpha|posts|photos)\\.app\\.net/.*"
], ],
"name": "ADN" "name": "ADN",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://gist\\.github\\.com/(?:[-0-9a-zA-Z]+/)?([0-9a-fA-f]+)" "https?://gist\\.github\\.com/(?:[-0-9a-zA-Z]+/)?([0-9a-fA-f]+)"
], ],
"name": "Gist" "name": "Gist",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://www\\.(dropbox\\.com/s/.+\\.(?:jpg|png|gif))", "https?://www\\.(dropbox\\.com/s/.+\\.(?:jpg|png|gif))",
"https?://db\\.tt/[a-zA-Z0-9]+" "https?://db\\.tt/[a-zA-Z0-9]+"
], ],
"name": "Dropbox" "name": "Dropbox",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://[^\\.]+\\.wikipedia\\.org/wiki/(?!Talk:)[^#]+(?:#(.+))?" "https?://[^\\.]+\\.wikipedia\\.org/wiki/(?!Talk:)[^#]+(?:#(.+))?"
], ],
"name": "Wikipedia" "name": "Wikipedia",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www.traileraddict.com/trailer/[^/]+/trailer" "http://www.traileraddict.com/trailer/[^/]+/trailer"
], ],
"name": "TrailerAddict" "name": "TrailerAddict",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://lockerz\\.com/[sd]/\\d+" "http://lockerz\\.com/[sd]/\\d+"
], ],
"name": "Lockerz" "name": "Lockerz",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://gifuk\\.com/s/[0-9a-f]{16}" "http://gifuk\\.com/s/[0-9a-f]{16}"
], ],
"name": "GIFUK" "name": "GIFUK",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://trailers\\.apple\\.com/trailers/[^/]+/[^/]+" "http://trailers\\.apple\\.com/trailers/[^/]+/[^/]+"
], ],
"name": "iTunes Movie Trailers" "name": "iTunes Movie Trailers",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://gfycat\\.com/([a-zA-Z]+)" "http://gfycat\\.com/([a-zA-Z]+)"
], ],
"name": "Gfycat" "name": "Gfycat",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://bash\\.org/\\?(\\d+)" "http://bash\\.org/\\?(\\d+)"
], ],
"name": "Bash.org" "name": "Bash.org",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://arstechnica\\.com/[^/]+/\\d+/\\d+/[^/]+/?$" "http://arstechnica\\.com/[^/]+/\\d+/\\d+/[^/]+/?$"
], ],
"name": "Ars Technica" "name": "Ars Technica",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://imgur\\.com/gallery/[0-9a-zA-Z]+" "http://imgur\\.com/gallery/[0-9a-zA-Z]+"
], ],
"name": "Imgur" "name": "Imgur",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.asciiartfarts\\.com/[0-9]+\\.html" "http://www\\.asciiartfarts\\.com/[0-9]+\\.html"
], ],
"name": "ASCII Art Farts" "name": "ASCII Art Farts",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.monoprice\\.com/products/product\\.asp\\?.*p_id=\\d+" "http://www\\.monoprice\\.com/products/product\\.asp\\?.*p_id=\\d+"
], ],
"name": "Monoprice" "name": "Monoprice",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://boingboing\\.net/\\d{4}/\\d{2}/\\d{2}/[^/]+\\.html" "http://boingboing\\.net/\\d{4}/\\d{2}/\\d{2}/[^/]+\\.html"
], ],
"name": "Boing Boing" "name": "Boing Boing",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://github\\.com/([^/]+)/([^/]+)/commit/(.+)", "https?://github\\.com/([^/]+)/([^/]+)/commit/(.+)",
"http://git\\.io/[_0-9a-zA-Z]+" "http://git\\.io/[_0-9a-zA-Z]+"
], ],
"name": "Github Commit" "name": "Github Commit",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://open\\.spotify\\.com/(track|album)/([0-9a-zA-Z]{22})" "https?://open\\.spotify\\.com/(track|album)/([0-9a-zA-Z]{22})"
], ],
"name": "Spotify" "name": "Spotify",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://path\\.com/p/([0-9a-zA-Z]+)$" "https?://path\\.com/p/([0-9a-zA-Z]+)$"
], ],
"name": "Path" "name": "Path",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www.funnyordie.com/videos/[^/]+/.+" "http://www.funnyordie.com/videos/[^/]+/.+"
], ],
"name": "Funny or Die" "name": "Funny or Die",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://(?:www\\.)?twitpic\\.com/([^/]+)" "http://(?:www\\.)?twitpic\\.com/([^/]+)"
], ],
"name": "Twitpic" "name": "Twitpic",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://www\\.giantbomb\\.com/videos/[^/]+/\\d+-\\d+/?" "https?://www\\.giantbomb\\.com/videos/[^/]+/\\d+-\\d+/?"
], ],
"name": "GiantBomb" "name": "GiantBomb",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://(?:www\\.)?beeradvocate\\.com/beer/profile/\\d+/\\d+" "http://(?:www\\.)?beeradvocate\\.com/beer/profile/\\d+/\\d+"
], ],
"name": "Beer Advocate" "name": "Beer Advocate",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://(?:www\\.)?imdb.com/title/(tt\\d+)" "http://(?:www\\.)?imdb.com/title/(tt\\d+)"
], ],
"name": "IMDB" "name": "IMDB",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://cl\\.ly/(?:image/)?[0-9a-zA-Z]+/?$" "http://cl\\.ly/(?:image/)?[0-9a-zA-Z]+/?$"
], ],
"name": "CloudApp" "name": "CloudApp",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://clyp\\.it/.*" "http://clyp\\.it/.*"
], ],
"name": "Clyp" "name": "Clyp",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.hulu\\.com/watch/.*" "http://www\\.hulu\\.com/watch/.*"
], ],
"name": "Hulu" "name": "Hulu",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$", "https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$",
"https?://t\\.co/[a-zA-Z0-9]+" "https?://t\\.co/[a-zA-Z0-9]+"
], ],
"name": "Twitter" "name": "Twitter",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www\\.)?vimeo\\.com/.+" "https?://(?:www\\.)?vimeo\\.com/.+"
], ],
"name": "Vimeo" "name": "Vimeo",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.amazon\\.com/(?:.+/)?[gd]p/(?:product/)?(?:tags-on-product/)?([a-zA-Z0-9]+)", "http://www\\.amazon\\.com/(?:.+/)?[gd]p/(?:product/)?(?:tags-on-product/)?([a-zA-Z0-9]+)",
"http://amzn\\.com/([^/]+)" "http://amzn\\.com/([^/]+)"
], ],
"name": "Amazon" "name": "Amazon",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://qik\\.com/video/.*" "http://qik\\.com/video/.*"
], ],
"name": "Qik" "name": "Qik",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
@@ -269,56 +312,65 @@
"http://www\\.rdio\\.com/artist/[^/]+/album/[^/]+/track/[^/]+/?", "http://www\\.rdio\\.com/artist/[^/]+/album/[^/]+/track/[^/]+/?",
"http://www\\.rdio\\.com/people/[^/]+/playlists/\\d+/[^/]+" "http://www\\.rdio\\.com/people/[^/]+/playlists/\\d+/[^/]+"
], ],
"name": "Rdio" "name": "Rdio",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.slideshare\\.net/.*/.*" "http://www\\.slideshare\\.net/.*/.*"
], ],
"name": "SlideShare" "name": "SlideShare",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://imgur\\.com/([0-9a-zA-Z]+)$" "http://imgur\\.com/([0-9a-zA-Z]+)$"
], ],
"name": "Imgur" "name": "Imgur",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://instagr(?:\\.am|am\\.com)/p/.+" "https?://instagr(?:\\.am|am\\.com)/p/.+"
], ],
"name": "Instagram" "name": "Instagram",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.twitlonger\\.com/show/[a-zA-Z0-9]+", "http://www\\.twitlonger\\.com/show/[a-zA-Z0-9]+",
"http://tl\\.gd/[^/]+" "http://tl\\.gd/[^/]+"
], ],
"name": "Twitlonger" "name": "Twitlonger",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://vine.co/v/[a-zA-Z0-9]+" "https?://vine.co/v/[a-zA-Z0-9]+"
], ],
"name": "Vine" "name": "Vine",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://www\\.urbandictionary\\.com/define\\.php\\?term=.+" "http://www\\.urbandictionary\\.com/define\\.php\\?term=.+"
], ],
"name": "Urban Dictionary" "name": "Urban Dictionary",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"http://picplz\\.com/user/[^/]+/pic/[^/]+" "http://picplz\\.com/user/[^/]+/pic/[^/]+"
], ],
"name": "Picplz" "name": "Picplz",
"height": 110
}, },
{ {
"patterns": [ "patterns": [
"https?://(?:www\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/photo/\\d+(?:/large|/)?$", "https?://(?:www\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/photo/\\d+(?:/large|/)?$",
"https?://pic\\.twitter\\.com/.+" "https?://pic\\.twitter\\.com/.+"
], ],
"name": "Twitter" "name": "Twitter",
"height": 110
} }
] ]

20
web/react/utils/utils.jsx
Просмотреть файл

@@ -252,13 +252,6 @@ export function getTimestamp() {
// extracts links not styled by Markdown // extracts links not styled by Markdown
export function extractLinks(text) { export function extractLinks(text) {
const urlMatcher = new Autolinker.matchParser.MatchParser({
urls: true,
emails: false,
twitter: false,
phone: false,
hashtag: false
});
const links = []; const links = [];
let replaceText = text; let replaceText = text;
@@ -271,7 +264,7 @@ export function extractLinks(text) {
} }
} }
function replaceFn(match) { function replaceFn(autolinker, match) {
let link = ''; let link = '';
const matchText = match.getMatchedText(); const matchText = match.getMatchedText();
const tempText = replaceText; const tempText = replaceText;
@@ -304,7 +297,16 @@ export function extractLinks(text) {
links.push(link); links.push(link);
} }
urlMatcher.replace(text, replaceFn, this);
Autolinker.link(text, {
replaceFn,
urls: true,
emails: false,
twitter: false,
phone: false,
hashtag: false
});
return {links, text}; return {links, text};
} }

2
web/sass-files/sass/partials/_post.scss
Просмотреть файл

@@ -740,6 +740,7 @@ body.ios {
width: 80%; width: 80%;
padding-right: 5px; padding-right: 5px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden;
&.attachment__body--no_thumb { &.attachment__body--no_thumb {
width: 100%; width: 100%;
} }
@@ -754,6 +755,7 @@ body.ios {
margin: 5px 0; margin: 5px 0;
padding: 0; padding: 0;
line-height: 16px; line-height: 16px;
height: 22px;
font-size: 16px; font-size: 16px;
a { a {
font-size: 16px; font-size: 16px;