From bd26e4e9c1b146163ee839de0a45bb9354efd1f2 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 9 Jun 2020 17:17:24 -0400 Subject: [PATCH] Fixing some front end pictshare to pictrs conversions. --- ansible/lemmy.yml | 3 +++ ansible/templates/docker-compose.yml | 2 +- ansible/templates/nginx.conf | 6 +++++- docker/dev/docker-compose.yml | 19 +++++++------------ 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 ++++++++++++------------- 13 files changed, 77 insertions(+), 67 deletions(-) diff --git a/ansible/lemmy.yml b/ansible/lemmy.yml index dcafc5eac..0b49856ac 100644 --- a/ansible/lemmy.yml +++ b/ansible/lemmy.yml @@ -39,6 +39,9 @@ - { src: '../docker/iframely.config.local.js', dest: '/lemmy/iframely.config.local.js', mode: '0600' } vars: lemmy_docker_image: "dessalines/lemmy:{{ lookup('file', 'VERSION') }}" + lemmy_port: "8536" + pictshare_port: "8537" + iframely_port: "8538" - name: add config file (only during initial setup) template: src='templates/config.hjson' dest='/lemmy/lemmy.hjson' mode='0600' force='no' owner='1000' group='1000' diff --git a/ansible/templates/docker-compose.yml b/ansible/templates/docker-compose.yml index 0b33399bd..f4c94fd71 100644 --- a/ansible/templates/docker-compose.yml +++ b/ansible/templates/docker-compose.yml @@ -37,7 +37,7 @@ services: iframely: image: dogbin/iframely:latest ports: - - "127.0.0.1:8538:80" + - "127.0.0.1:8061:80" volumes: - ./iframely.config.local.js:/iframely/config.local.js:ro restart: always diff --git a/ansible/templates/nginx.conf b/ansible/templates/nginx.conf index b96bbce7f..68fa64fc5 100644 --- a/ansible/templates/nginx.conf +++ b/ansible/templates/nginx.conf @@ -75,10 +75,14 @@ server { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + + if ($request_uri ~ \.(?:ico|gif|jpe?g|png|webp|bmp|mp4)$) { + add_header Cache-Control "public, max-age=31536000, immutable"; + } } location /iframely/ { - proxy_pass http://0.0.0.0:8538/; + proxy_pass http://0.0.0.0:8061/; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; diff --git a/docker/dev/docker-compose.yml b/docker/dev/docker-compose.yml index 6c0624c4b..60b04beb8 100644 --- a/docker/dev/docker-compose.yml +++ b/docker/dev/docker-compose.yml @@ -1,22 +1,13 @@ version: '3.3' services: - nginx: - image: nginx:1.19-alpine - ports: - - "8536:8536" - volumes: - - ./nginx.conf:/etc/nginx/nginx.conf - depends_on: - - lemmy - - pictrs - - iframely - restart: "always" lemmy: build: context: ../../ dockerfile: docker/dev/Dockerfile + ports: + - "127.0.0.1:8536:8536" restart: always environment: - RUST_LOG=debug @@ -37,7 +28,9 @@ services: restart: always pictrs: - image: asonix/pictrs:amd64-v0.1.0-r9 + image: asonix/pictrs:v0.1.0-r13 + ports: + - "127.0.0.1:8537:8080" user: 991:991 volumes: - ./volumes/pictrs:/mnt @@ -45,6 +38,8 @@ services: iframely: image: dogbin/iframely:latest + ports: + - "127.0.0.1:8061:80" volumes: - ../iframely.config.local.js:/iframely/config.local.js:ro restart: always diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index e0d8aff50..4cb74391b 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 a9356d05d..7811f9180 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 36a1e2828..7d10acf72 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 337b16501..71924f0cb 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 b9662fae3..c32f4f2fb 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 fce315610..b280ef4fb 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 1f136e006..ea87fd3aa 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 c3b12fe02..833366a6e 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 3bad50404..2820bc482 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; }