mirror of
https://github.com/LemmyNet/lemmy
synced 2024-11-10 06:54:12 +00:00
Fixing some front end pictshare to pictrs conversions.
This commit is contained in:
parent
e583e45d9a
commit
bd26e4e9c1
13 changed files with 77 additions and 67 deletions
3
ansible/lemmy.yml
vendored
3
ansible/lemmy.yml
vendored
|
@ -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'
|
||||||
|
|
2
ansible/templates/docker-compose.yml
vendored
2
ansible/templates/docker-compose.yml
vendored
|
@ -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
|
||||||
|
|
6
ansible/templates/nginx.conf
vendored
6
ansible/templates/nginx.conf
vendored
|
@ -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;
|
||||||
|
|
19
docker/dev/docker-compose.yml
vendored
19
docker/dev/docker-compose.yml
vendored
|
@ -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
|
||||||
|
|
6
ui/src/components/navbar.tsx
vendored
6
ui/src/components/navbar.tsx
vendored
|
@ -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;
|
||||||
|
|
20
ui/src/components/post-form.tsx
vendored
20
ui/src/components/post-form.tsx
vendored
|
@ -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;
|
||||||
|
|
10
ui/src/components/post-listing.tsx
vendored
10
ui/src/components/post-listing.tsx
vendored
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
24
ui/src/components/private-message.tsx
vendored
24
ui/src/components/private-message.tsx
vendored
|
@ -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>
|
||||||
|
|
2
ui/src/components/search.tsx
vendored
2
ui/src/components/search.tsx
vendored
|
@ -22,7 +22,7 @@ import {
|
||||||
fetchLimit,
|
fetchLimit,
|
||||||
routeSearchTypeToEnum,
|
routeSearchTypeToEnum,
|
||||||
routeSortTypeToEnum,
|
routeSortTypeToEnum,
|
||||||
pictshareAvatarThumbnail,
|
pictrsAvatarThumbnail,
|
||||||
showAvatars,
|
showAvatars,
|
||||||
toast,
|
toast,
|
||||||
createCommentLikeRes,
|
createCommentLikeRes,
|
||||||
|
|
2
ui/src/components/sidebar.tsx
vendored
2
ui/src/components/sidebar.tsx
vendored
|
@ -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';
|
||||||
|
|
4
ui/src/components/user-listing.tsx
vendored
4
ui/src/components/user-listing.tsx
vendored
|
@ -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"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
21
ui/src/components/user.tsx
vendored
21
ui/src/components/user.tsx
vendored
|
@ -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
25
ui/src/utils.ts
vendored
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue