Fixing some front end pictshare to pictrs conversions.

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'

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

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;

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

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<any, NavbarState> {
                     <span>
                       {UserService.Instance.user.avatar && showAvatars() && (
                         <img
-                          src={pictshareAvatarThumbnail(
+                          src={pictrsAvatarThumbnail(
                             UserService.Instance.user.avatar
                           )}
                           height="32"
@@ -381,7 +381,7 @@ export class Navbar extends Component<any, NavbarState> {
 
   requestNotificationPermission() {
     if (UserService.Instance.user) {
-      document.addEventListener('DOMContentLoaded', function() {
+      document.addEventListener('DOMContentLoaded', function () {
         if (!Notification) {
           toast(i18n.t('notifications_error'), 'danger');
           return;

ui/src/components/post-form.tsx

@@ -520,7 +520,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
     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<PostFormProps, PostFormState> {
     })
       .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');
+        }
       })
       .catch(error => {
         i.state.imageLoading = false;

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<PostListingProps, PostListingState> {
   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);
     }
   }
 

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<
                     <img
                       height="32"
                       width="32"
-                      src={pictshareAvatarThumbnail(
+                      src={pictrsAvatarThumbnail(
                         this.mine
                           ? message.recipient_avatar
                           : message.creator_avatar
@@ -144,8 +139,9 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.read &&
-                            'text-success'}`}
+                          class={`icon icon-inline ${
+                            message.read && 'text-success'
+                          }`}
                         >
                           <use xlinkHref="#icon-check"></use>
                         </svg>
@@ -188,8 +184,9 @@ export class PrivateMessage extends Component<
                         }
                       >
                         <svg
-                          class={`icon icon-inline ${message.deleted &&
-                            'text-danger'}`}
+                          class={`icon icon-inline ${
+                            message.deleted && 'text-danger'
+                          }`}
                         >
                           <use xlinkHref="#icon-trash"></use>
                         </svg>
@@ -204,8 +201,9 @@ export class PrivateMessage extends Component<
                     data-tippy-content={i18n.t('view_source')}
                   >
                     <svg
-                      class={`icon icon-inline ${this.state.viewSource &&
-                        'text-success'}`}
+                      class={`icon icon-inline ${
+                        this.state.viewSource && 'text-success'
+                      }`}
                     >
                       <use xlinkHref="#icon-file-text"></use>
                     </svg>

ui/src/components/search.tsx

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

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';

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<UserListingProps, any> {
           <img
             height="32"
             width="32"
-            src={pictshareAvatarThumbnail(user.avatar)}
+            src={pictrsAvatarThumbnail(user.avatar)}
             class="rounded-circle mr-2"
           />
         )}

ui/src/components/user.tsx

@@ -990,7 +990,7 @@ export class User extends Component<any, UserState> {
     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<any, UserState> {
     })
       .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;
-        console.log(url);
           i.state.avatarLoading = false;
           i.setState(i.state);
+        } else {
+          i.state.avatarLoading = false;
+          i.setState(i.state);
+          toast(JSON.stringify(res), 'danger');
+        }
       })
       .catch(error => {
         i.state.avatarLoading = false;

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;
 }