Fixing some front end pictshare to pictrs conversions.

This commit is contained in:
Dessalines 2020-06-09 17:17:24 -04:00
parent e583e45d9a
commit bd26e4e9c1
13 changed files with 77 additions and 67 deletions

3
ansible/lemmy.yml vendored
View file

@ -39,6 +39,9 @@
- { src: '../docker/iframely.config.local.js', dest: '/lemmy/iframely.config.local.js', mode: '0600' } - { src: '../docker/iframely.config.local.js', dest: '/lemmy/iframely.config.local.js', mode: '0600' }
vars: vars:
lemmy_docker_image: "dessalines/lemmy:{{ lookup('file', 'VERSION') }}" 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) - 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' template: src='templates/config.hjson' dest='/lemmy/lemmy.hjson' mode='0600' force='no' owner='1000' group='1000'

View file

@ -37,7 +37,7 @@ services:
iframely: iframely:
image: dogbin/iframely:latest image: dogbin/iframely:latest
ports: ports:
- "127.0.0.1:8538:80" - "127.0.0.1:8061:80"
volumes: volumes:
- ./iframely.config.local.js:/iframely/config.local.js:ro - ./iframely.config.local.js:/iframely/config.local.js:ro
restart: always restart: always

View file

@ -75,10 +75,14 @@ server {
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 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/ { 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 X-Real-IP $remote_addr;
proxy_set_header Host $host; proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

View file

@ -1,22 +1,13 @@
version: '3.3' version: '3.3'
services: 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: lemmy:
build: build:
context: ../../ context: ../../
dockerfile: docker/dev/Dockerfile dockerfile: docker/dev/Dockerfile
ports:
- "127.0.0.1:8536:8536"
restart: always restart: always
environment: environment:
- RUST_LOG=debug - RUST_LOG=debug
@ -37,7 +28,9 @@ services:
restart: always restart: always
pictrs: 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 user: 991:991
volumes: volumes:
- ./volumes/pictrs:/mnt - ./volumes/pictrs:/mnt
@ -45,6 +38,8 @@ services:
iframely: iframely:
image: dogbin/iframely:latest image: dogbin/iframely:latest
ports:
- "127.0.0.1:8061:80"
volumes: volumes:
- ../iframely.config.local.js:/iframely/config.local.js:ro - ../iframely.config.local.js:/iframely/config.local.js:ro
restart: always restart: always

View file

@ -22,7 +22,7 @@ import {
} from '../interfaces'; } from '../interfaces';
import { import {
wsJsonToRes, wsJsonToRes,
pictshareAvatarThumbnail, pictrsAvatarThumbnail,
showAvatars, showAvatars,
fetchLimit, fetchLimit,
isCommentType, isCommentType,
@ -218,7 +218,7 @@ export class Navbar extends Component<any, NavbarState> {
<span> <span>
{UserService.Instance.user.avatar && showAvatars() && ( {UserService.Instance.user.avatar && showAvatars() && (
<img <img
src={pictshareAvatarThumbnail( src={pictrsAvatarThumbnail(
UserService.Instance.user.avatar UserService.Instance.user.avatar
)} )}
height="32" height="32"
@ -381,7 +381,7 @@ export class Navbar extends Component<any, NavbarState> {
requestNotificationPermission() { requestNotificationPermission() {
if (UserService.Instance.user) { if (UserService.Instance.user) {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
if (!Notification) { if (!Notification) {
toast(i18n.t('notifications_error'), 'danger'); toast(i18n.t('notifications_error'), 'danger');
return; return;

View file

@ -520,7 +520,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
const imageUploadUrl = `/pictrs/image`; const imageUploadUrl = `/pictrs/image`;
const formData = new FormData(); const formData = new FormData();
formData.append('images', file); formData.append('images[]', file);
i.state.imageLoading = true; i.state.imageLoading = true;
i.setState(i.state); i.setState(i.state);
@ -531,13 +531,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}) })
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
let url = `${window.location.origin}/pictrs/${encodeURI(res.url)}`; console.log('pictrs upload:');
if (res.filetype == 'mp4') { console.log(res);
url += '/raw'; 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 => { .catch(error => {
i.state.imageLoading = false; i.state.imageLoading = false;

View file

@ -28,7 +28,7 @@ import {
isImage, isImage,
isVideo, isVideo,
getUnixTime, getUnixTime,
pictshareImage, pictrsImage,
setupTippy, setupTippy,
previewLines, previewLines,
} from '../utils'; } from '../utils';
@ -161,15 +161,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
getImage(thumbnail: boolean = false) { getImage(thumbnail: boolean = false) {
let post = this.props.post; let post = this.props.post;
if (isImage(post.url)) { if (isImage(post.url)) {
if (post.url.includes('pictshare')) { if (post.url.includes('pictrs')) {
return pictshareImage(post.url, thumbnail); return pictrsImage(post.url, thumbnail);
} else if (post.thumbnail_url) { } else if (post.thumbnail_url) {
return pictshareImage(post.thumbnail_url, thumbnail); return pictrsImage(post.thumbnail_url, thumbnail);
} else { } else {
return post.url; return post.url;
} }
} else if (post.thumbnail_url) { } else if (post.thumbnail_url) {
return pictshareImage(post.thumbnail_url, thumbnail); return pictrsImage(post.thumbnail_url, thumbnail);
} }
} }

View file

@ -5,12 +5,7 @@ import {
EditPrivateMessageForm, EditPrivateMessageForm,
} from '../interfaces'; } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { import { mdToHtml, pictrsAvatarThumbnail, showAvatars, toast } from '../utils';
mdToHtml,
pictshareAvatarThumbnail,
showAvatars,
toast,
} from '../utils';
import { MomentTime } from './moment-time'; import { MomentTime } from './moment-time';
import { PrivateMessageForm } from './private-message-form'; import { PrivateMessageForm } from './private-message-form';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
@ -78,7 +73,7 @@ export class PrivateMessage extends Component<
<img <img
height="32" height="32"
width="32" width="32"
src={pictshareAvatarThumbnail( src={pictrsAvatarThumbnail(
this.mine this.mine
? message.recipient_avatar ? message.recipient_avatar
: message.creator_avatar : message.creator_avatar
@ -144,8 +139,9 @@ export class PrivateMessage extends Component<
} }
> >
<svg <svg
class={`icon icon-inline ${message.read && class={`icon icon-inline ${
'text-success'}`} message.read && 'text-success'
}`}
> >
<use xlinkHref="#icon-check"></use> <use xlinkHref="#icon-check"></use>
</svg> </svg>
@ -188,8 +184,9 @@ export class PrivateMessage extends Component<
} }
> >
<svg <svg
class={`icon icon-inline ${message.deleted && class={`icon icon-inline ${
'text-danger'}`} message.deleted && 'text-danger'
}`}
> >
<use xlinkHref="#icon-trash"></use> <use xlinkHref="#icon-trash"></use>
</svg> </svg>
@ -204,8 +201,9 @@ export class PrivateMessage extends Component<
data-tippy-content={i18n.t('view_source')} data-tippy-content={i18n.t('view_source')}
> >
<svg <svg
class={`icon icon-inline ${this.state.viewSource && class={`icon icon-inline ${
'text-success'}`} this.state.viewSource && 'text-success'
}`}
> >
<use xlinkHref="#icon-file-text"></use> <use xlinkHref="#icon-file-text"></use>
</svg> </svg>

View file

@ -22,7 +22,7 @@ import {
fetchLimit, fetchLimit,
routeSearchTypeToEnum, routeSearchTypeToEnum,
routeSortTypeToEnum, routeSortTypeToEnum,
pictshareAvatarThumbnail, pictrsAvatarThumbnail,
showAvatars, showAvatars,
toast, toast,
createCommentLikeRes, createCommentLikeRes,

View file

@ -11,7 +11,7 @@ import { WebSocketService, UserService } from '../services';
import { import {
mdToHtml, mdToHtml,
getUnixTime, getUnixTime,
pictshareAvatarThumbnail, pictrsAvatarThumbnail,
showAvatars, showAvatars,
} from '../utils'; } from '../utils';
import { CommunityForm } from './community-form'; import { CommunityForm } from './community-form';

View file

@ -1,7 +1,7 @@
import { Component } from 'inferno'; import { Component } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
import { UserView } from '../interfaces'; import { UserView } from '../interfaces';
import { pictshareAvatarThumbnail, showAvatars } from '../utils'; import { pictrsAvatarThumbnail, showAvatars } from '../utils';
interface UserOther { interface UserOther {
name: string; name: string;
@ -25,7 +25,7 @@ export class UserListing extends Component<UserListingProps, any> {
<img <img
height="32" height="32"
width="32" width="32"
src={pictshareAvatarThumbnail(user.avatar)} src={pictrsAvatarThumbnail(user.avatar)}
class="rounded-circle mr-2" class="rounded-circle mr-2"
/> />
)} )}

View file

@ -990,7 +990,7 @@ export class User extends Component<any, UserState> {
let file = event.target.files[0]; let file = event.target.files[0];
const imageUploadUrl = `/pictrs/image`; const imageUploadUrl = `/pictrs/image`;
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('images[]', file);
i.state.avatarLoading = true; i.state.avatarLoading = true;
i.setState(i.state); i.setState(i.state);
@ -1001,14 +1001,19 @@ export class User extends Component<any, UserState> {
}) })
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
let url = `${window.location.origin}/pictrs/${res.url}`; console.log('pictrs upload:');
if (res.filetype == 'mp4') { console.log(res);
url += '/raw'; 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 => { .catch(error => {
i.state.avatarLoading = false; i.state.avatarLoading = false;

25
ui/src/utils.ts vendored
View file

@ -440,10 +440,12 @@ export function objectFlip(obj: any) {
return ret; return ret;
} }
export function pictshareAvatarThumbnail(src: string): string { export function pictrsAvatarThumbnail(src: string): string {
// sample url: http://localhost:8535/pictshare/gs7xuu.jpg // sample url: http://localhost:8535/pictrs/image/thumbnail256/gs7xuu.jpg
let split = src.split('pictshare'); let split = src.split('/pictrs/image');
let out = `${split[0]}pictshare/${canUseWebP() ? 'webp/' : ''}96${split[1]}`; let out = `${split[0]}/pictrs/image/${
canUseWebP() ? 'webp/' : ''
}thumbnail96${split[1]}`;
return out; return out;
} }
@ -455,21 +457,18 @@ export function showAvatars(): boolean {
} }
// Converts to image thumbnail // Converts to image thumbnail
export function pictshareImage( export function pictrsImage(hash: string, thumbnail: boolean = false): string {
hash: string, let root = `/pictrs/image`;
thumbnail: boolean = false
): string {
let root = `/pictshare`;
// Necessary for other servers / domains // Necessary for other servers / domains
if (hash.includes('pictshare')) { if (hash.includes('pictrs')) {
let split = hash.split('/pictshare/'); let split = hash.split('/pictrs/image/');
root = `${split[0]}/pictshare`; root = `${split[0]}/pictrs/image`;
hash = split[1]; hash = split[1];
} }
let out = `${root}/${canUseWebP() ? 'webp/' : ''}${ let out = `${root}/${canUseWebP() ? 'webp/' : ''}${
thumbnail ? '192/' : '' thumbnail ? 'thumbnail192/' : ''
}${hash}`; }${hash}`;
return out; return out;
} }