From fb32acb1ed8ba647bb52bfdc213fdf376bbaac72 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 27 Feb 2020 12:55:23 -0500 Subject: [PATCH] Use image thumbnails from pictshare. Fixes #555 --- ui/assets/css/main.css | 10 --- ui/package.json | 4 +- ui/src/components/post-listing.tsx | 108 +++++++++++++++++------------ ui/src/utils.ts | 10 +-- 4 files changed, 72 insertions(+), 60 deletions(-) diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 704cddae5..048f687ec 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -188,16 +188,6 @@ hr { border: unset; } -.img-expand-overlay { - position: absolute; - top: 0; - right: 0; - padding: 2px; - background: rgba(0,0,0,.4); - border-bottom-left-radius: 0.25rem !important; - border-top-right-radius: 0.25rem !important; -} - .link-overlay:hover { transition: .1s; opacity: 1; diff --git a/ui/package.json b/ui/package.json index 6d7ad7758..79756bc69 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,9 +1,9 @@ { "name": "lemmy", - "description": "A simple UI for lemmy", + "description": "The official Lemmy UI", "version": "1.0.0", "author": "Dessalines", - "license": "GPL-2.0-or-later", + "license": "AGPL-3.0-or-later", "main": "index.js", "scripts": { "build": "node fuse prod", diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index d52df9d1c..56c1f0d9c 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -51,6 +51,7 @@ interface PostListingState { downvotes: number; url: string; iframely: FramelyData; + thumbnail: string; } interface PostListingProps { @@ -80,6 +81,7 @@ export class PostListing extends Component { downvotes: this.props.post.downvotes, url: this.props.post.url, iframely: null, + thumbnail: null, }; constructor(props: any, context: any) { @@ -92,6 +94,7 @@ export class PostListing extends Component { this.handleEditCancel = this.handleEditCancel.bind(this); if (this.state.url) { + this.setThumbnail(); this.fetchIframely(); } } @@ -105,9 +108,11 @@ export class PostListing extends Component { if (nextProps.post.url !== this.state.url) { this.state.url = nextProps.post.url; if (this.state.url) { + this.setThumbnail(); this.fetchIframely(); } else { this.state.iframely = null; + this.state.thumbnail = null; } } @@ -132,6 +137,18 @@ export class PostListing extends Component { ); } + imgThumbnail() { + let post = this.props.post; + return ( + + ); + } + listing() { let post = this.props.post; return ( @@ -161,37 +178,32 @@ export class PostListing extends Component { )} - {this.hasImage() && !this.state.imageExpanded && ( + {this.state.thumbnail && !this.state.imageExpanded && ( )} {this.state.url && isVideo(this.state.url) && ( @@ -247,7 +259,7 @@ export class PostListing extends Component { )} - {this.hasImage() && ( + {this.state.thumbnail && ( <> {!this.state.imageExpanded ? ( { > @@ -795,29 +807,39 @@ export class PostListing extends Component { .then(res => { this.state.iframely = res; this.setState(this.state); + + // Store and fetch the image in pictshare + if ( + this.state.iframely.thumbnail_url && + isImage(this.state.iframely.thumbnail_url) + ) { + fetch( + `/pictshare/api/geturl.php?url=${this.state.iframely.thumbnail_url}` + ) + .then(res => res.json()) + .then(res => { + let url = `${window.location.origin}/pictshare/${res.url}`; + if (res.filetype == 'mp4') { + url += '/raw'; + } + this.state.thumbnail = url; + this.setState(this.state); + }); + } }) .catch(error => { console.error(`Iframely service not set up properly. ${error}`); }); } - hasImage(): boolean { - return ( - (this.state.url && isImage(this.state.url)) || - (this.state.iframely && this.state.iframely.thumbnail_url !== undefined) - ); - } - - getImage(): string { + setThumbnail() { let simpleImg = isImage(this.state.url); if (simpleImg) { - return this.state.url; - } else if (this.state.iframely) { - let iframelyThumbnail = this.state.iframely.thumbnail_url; - if (iframelyThumbnail) { - return iframelyThumbnail; - } + this.state.thumbnail = this.state.url; + } else { + this.state.thumbnail = null; } + this.setState(this.state); } handlePostLike(i: PostListing) { diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 1d5615abb..d329dcd58 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -220,9 +220,9 @@ export function routeSearchTypeToEnum(type: string): SearchType { } export async function getPageTitle(url: string) { - let res = await fetch(`https://textance.herokuapp.com/title/${url}`); - let data = await res.text(); - return data; + let res = await fetch(`/iframely/oembed?url=${url}`).then(res => res.json()); + let title = await res.title; + return title; } export function debounce( @@ -386,7 +386,7 @@ export function objectFlip(obj: any) { export function pictshareAvatarThumbnail(src: string): string { // sample url: http://localhost:8535/pictshare/gs7xuu.jpg let split = src.split('pictshare'); - let out = `${split[0]}pictshare/96x96${split[1]}`; + let out = `${split[0]}pictshare/96${split[1]}`; return out; } @@ -401,7 +401,7 @@ export function showAvatars(): boolean { export function imageThumbnailer(url: string): string { let split = url.split('pictshare'); if (split.length > 1) { - let out = `${split[0]}pictshare/192x192${split[1]}`; + let out = `${split[0]}pictshare/192${split[1]}`; return out; } else { return url;