From bd26e4e9c1b146163ee839de0a45bb9354efd1f2 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 9 Jun 2020 17:17:24 -0400 Subject: Fixing some front end pictshare to pictrs conversions. --- ui/src/components/navbar.tsx | 6 +++--- ui/src/components/post-form.tsx | 20 +++++++++++++------- ui/src/components/post-listing.tsx | 10 +++++----- ui/src/components/private-message.tsx | 24 +++++++++++------------- ui/src/components/search.tsx | 2 +- ui/src/components/sidebar.tsx | 2 +- ui/src/components/user-listing.tsx | 4 ++-- ui/src/components/user.tsx | 21 +++++++++++++-------- ui/src/utils.ts | 25 ++++++++++++------------- 9 files changed, 61 insertions(+), 53 deletions(-) (limited to 'ui') diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index e0d8aff5..4cb74391 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -22,7 +22,7 @@ import { } from '../interfaces'; import { wsJsonToRes, - pictshareAvatarThumbnail, + pictrsAvatarThumbnail, showAvatars, fetchLimit, isCommentType, @@ -218,7 +218,7 @@ export class Navbar extends Component { {UserService.Instance.user.avatar && showAvatars() && ( { requestNotificationPermission() { if (UserService.Instance.user) { - document.addEventListener('DOMContentLoaded', function() { + document.addEventListener('DOMContentLoaded', function () { if (!Notification) { toast(i18n.t('notifications_error'), 'danger'); return; diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index a9356d05..7811f918 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -520,7 +520,7 @@ export class PostForm extends Component { const imageUploadUrl = `/pictrs/image`; const formData = new FormData(); - formData.append('images', file); + formData.append('images[]', file); i.state.imageLoading = true; i.setState(i.state); @@ -531,13 +531,19 @@ export class PostForm extends Component { }) .then(res => res.json()) .then(res => { - let url = `${window.location.origin}/pictrs/${encodeURI(res.url)}`; - if (res.filetype == 'mp4') { - url += '/raw'; + console.log('pictrs upload:'); + console.log(res); + if (res.msg == 'ok') { + let hash = res.files[0].file; + let url = `${window.location.origin}/pictrs/image/${hash}`; + i.state.postForm.url = url; + i.state.imageLoading = false; + i.setState(i.state); + } else { + i.state.imageLoading = false; + i.setState(i.state); + toast(JSON.stringify(res), 'danger'); } - i.state.postForm.url = url; - i.state.imageLoading = false; - i.setState(i.state); }) .catch(error => { i.state.imageLoading = false; diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 36a1e282..7d10acf7 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -28,7 +28,7 @@ import { isImage, isVideo, getUnixTime, - pictshareImage, + pictrsImage, setupTippy, previewLines, } from '../utils'; @@ -161,15 +161,15 @@ export class PostListing extends Component { getImage(thumbnail: boolean = false) { let post = this.props.post; if (isImage(post.url)) { - if (post.url.includes('pictshare')) { - return pictshareImage(post.url, thumbnail); + if (post.url.includes('pictrs')) { + return pictrsImage(post.url, thumbnail); } else if (post.thumbnail_url) { - return pictshareImage(post.thumbnail_url, thumbnail); + return pictrsImage(post.thumbnail_url, thumbnail); } else { return post.url; } } else if (post.thumbnail_url) { - return pictshareImage(post.thumbnail_url, thumbnail); + return pictrsImage(post.thumbnail_url, thumbnail); } } diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx index 337b1650..71924f0c 100644 --- a/ui/src/components/private-message.tsx +++ b/ui/src/components/private-message.tsx @@ -5,12 +5,7 @@ import { EditPrivateMessageForm, } from '../interfaces'; import { WebSocketService, UserService } from '../services'; -import { - mdToHtml, - pictshareAvatarThumbnail, - showAvatars, - toast, -} from '../utils'; +import { mdToHtml, pictrsAvatarThumbnail, showAvatars, toast } from '../utils'; import { MomentTime } from './moment-time'; import { PrivateMessageForm } from './private-message-form'; import { i18n } from '../i18next'; @@ -78,7 +73,7 @@ export class PrivateMessage extends Component< @@ -188,8 +184,9 @@ export class PrivateMessage extends Component< } > @@ -204,8 +201,9 @@ export class PrivateMessage extends Component< data-tippy-content={i18n.t('view_source')} > diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index b9662fae..c32f4f2f 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -22,7 +22,7 @@ import { fetchLimit, routeSearchTypeToEnum, routeSortTypeToEnum, - pictshareAvatarThumbnail, + pictrsAvatarThumbnail, showAvatars, toast, createCommentLikeRes, diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index fce31561..b280ef4f 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -11,7 +11,7 @@ import { WebSocketService, UserService } from '../services'; import { mdToHtml, getUnixTime, - pictshareAvatarThumbnail, + pictrsAvatarThumbnail, showAvatars, } from '../utils'; import { CommunityForm } from './community-form'; diff --git a/ui/src/components/user-listing.tsx b/ui/src/components/user-listing.tsx index 1f136e00..ea87fd3a 100644 --- a/ui/src/components/user-listing.tsx +++ b/ui/src/components/user-listing.tsx @@ -1,7 +1,7 @@ import { Component } from 'inferno'; import { Link } from 'inferno-router'; import { UserView } from '../interfaces'; -import { pictshareAvatarThumbnail, showAvatars } from '../utils'; +import { pictrsAvatarThumbnail, showAvatars } from '../utils'; interface UserOther { name: string; @@ -25,7 +25,7 @@ export class UserListing extends Component { )} diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index c3b12fe0..833366a6 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -990,7 +990,7 @@ export class User extends Component { let file = event.target.files[0]; const imageUploadUrl = `/pictrs/image`; const formData = new FormData(); - formData.append('file', file); + formData.append('images[]', file); i.state.avatarLoading = true; i.setState(i.state); @@ -1001,14 +1001,19 @@ export class User extends Component { }) .then(res => res.json()) .then(res => { - let url = `${window.location.origin}/pictrs/${res.url}`; - if (res.filetype == 'mp4') { - url += '/raw'; + console.log('pictrs upload:'); + console.log(res); + if (res.msg == 'ok') { + let hash = res.files[0].file; + let url = `${window.location.origin}/pictrs/image/${hash}`; + i.state.userSettingsForm.avatar = url; + i.state.avatarLoading = false; + i.setState(i.state); + } else { + i.state.avatarLoading = false; + i.setState(i.state); + toast(JSON.stringify(res), 'danger'); } - i.state.userSettingsForm.avatar = url; - console.log(url); - i.state.avatarLoading = false; - i.setState(i.state); }) .catch(error => { i.state.avatarLoading = false; diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 3bad5040..2820bc48 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -440,10 +440,12 @@ export function objectFlip(obj: any) { return ret; } -export function pictshareAvatarThumbnail(src: string): string { - // sample url: http://localhost:8535/pictshare/gs7xuu.jpg - let split = src.split('pictshare'); - let out = `${split[0]}pictshare/${canUseWebP() ? 'webp/' : ''}96${split[1]}`; +export function pictrsAvatarThumbnail(src: string): string { + // sample url: http://localhost:8535/pictrs/image/thumbnail256/gs7xuu.jpg + let split = src.split('/pictrs/image'); + let out = `${split[0]}/pictrs/image/${ + canUseWebP() ? 'webp/' : '' + }thumbnail96${split[1]}`; return out; } @@ -455,21 +457,18 @@ export function showAvatars(): boolean { } // Converts to image thumbnail -export function pictshareImage( - hash: string, - thumbnail: boolean = false -): string { - let root = `/pictshare`; +export function pictrsImage(hash: string, thumbnail: boolean = false): string { + let root = `/pictrs/image`; // Necessary for other servers / domains - if (hash.includes('pictshare')) { - let split = hash.split('/pictshare/'); - root = `${split[0]}/pictshare`; + if (hash.includes('pictrs')) { + let split = hash.split('/pictrs/image/'); + root = `${split[0]}/pictrs/image`; hash = split[1]; } let out = `${root}/${canUseWebP() ? 'webp/' : ''}${ - thumbnail ? '192/' : '' + thumbnail ? 'thumbnail192/' : '' }${hash}`; return out; } -- cgit v1.2.3