Merge pull request #1074 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/ApiController.php

@@ -13,23 +13,28 @@ class ApiController extends BaseApiController
     // todo: deprecate and remove
     public function hydrateLikes(Request $request)
     {
-        $this->validate($request, [
-            'min' => 'nullable|integer|min:1',
-            'max' => 'nullable|integer',
-        ]);
+        return response()->json([]);
+    }
 
-        $profile = Auth::user()->profile;
-        $res = Cache::remember('api:like-ids:user:'.$profile->id, now()->addDays(1), function () use ($profile) {
-            return Like::whereProfileId($profile->id)
-                 ->orderBy('id', 'desc')
-                 ->take(1000)
-                 ->pluck('status_id');
-        });
+    public function siteConfiguration(Request $request)
+    {
+        $res = Cache::remember('api:site:configuration', now()->addMinutes(30), function() {
+            return [
+                'uploader' => [
+                    'max_photo_size' => config('pixelfed.max_photo_size'),
+                    'max_caption_length' => config('pixelfed.max_caption_length'),
+                    'album_limit' => config('pixelfed.max_album_length'),
+                    'image_quality' => config('pixelfed.image_quality'),
+
+                    'optimize_image' => config('pixelfed.optimize_image'),
+                    'optimize_video' => config('pixelfed.optimize_video'),
 
+                    'media_types' => config('pixelfed.media_types'),
+                    'enforce_account_limit' => config('pixelfed.enforce_account_limit')
+                ]
+            ];
+        });
         return response()->json($res);
     }
 
-    public function loadMoreComments(Request $request)
-    {
-    }
 }

app/Http/Controllers/InternalApiController.php

@@ -40,6 +40,7 @@ class InternalApiController extends Controller
         $this->fractal->setSerializer(new ArraySerializer());
     }
 
+    // deprecated v2 compose api
     public function compose(Request $request)
     {
         $this->validate($request, [
@@ -60,6 +61,9 @@ class InternalApiController extends Controller
         $cw = false;
 
         foreach($medias as $k => $media) {
+            if($k + 1 > config('pixelfed.max_album_length')) {
+                continue;
+            }
             $m = Media::findOrFail($media['id']);
             if($m->profile_id !== $profile->id || $m->status_id) {
                 abort(403, 'Invalid media id');
@@ -381,4 +385,68 @@ class InternalApiController extends Controller
         }
         return ['msg' => 200];
     }
+
+    public function composePost(Request $request)
+    {
+        $this->validate($request, [
+            'caption' => 'nullable|string',
+            'media.*'   => 'required',
+            'media.*.id' => 'required|integer|min:1',
+            'media.*.filter_class' => 'nullable|alpha_dash|max:30',
+            'media.*.license' => 'nullable|string|max:80',
+            'cw' => 'nullable|boolean',
+            'visibility' => 'required|string|in:public,private,unlisted|min:2|max:10'
+        ]);
+
+        $profile = Auth::user()->profile;
+        $visibility = $request->input('visibility');
+        $medias = $request->input('media');
+        $attachments = [];
+        $status = new Status;
+        $mimes = [];
+        $cw = $request->input('cw');
+
+        foreach($medias as $k => $media) {
+            if($k + 1 > config('pixelfed.max_album_length')) {
+                continue;
+            }
+            $m = Media::findOrFail($media['id']);
+            if($m->profile_id !== $profile->id || $m->status_id) {
+                abort(403, 'Invalid media id');
+            }
+            $m->filter_class = in_array($media['filter_class'], Filter::classes()) ? $media['filter_class'] : null;
+            $m->license = $media['license'];
+            $m->caption = isset($media['alt']) ? strip_tags($media['alt']) : null;
+            $m->order = isset($media['cursor']) && is_int($media['cursor']) ? (int) $media['cursor'] : $k;
+            if($cw == true || $profile->cw == true) {
+                $m->is_nsfw = $cw;
+                $status->is_nsfw = $cw;
+            }
+            $m->save();
+            $attachments[] = $m;
+            array_push($mimes, $m->mime);
+        }
+
+        $status->caption = strip_tags($request->caption);
+        $status->scope = 'draft';
+        $status->profile_id = $profile->id;
+        $status->save();
+
+        foreach($attachments as $media) {
+            $media->status_id = $status->id;
+            $media->save();
+        }
+
+        $visibility = $profile->unlisted == true && $visibility == 'public' ? 'unlisted' : $visibility;
+        $cw = $profile->cw == true ? true : $cw;
+        $status->is_nsfw = $cw;
+        $status->visibility = $visibility;
+        $status->scope = $visibility;
+        $status->type = StatusController::mimeTypeCheck($mimes);
+        $status->save();
+
+        NewStatusPipeline::dispatch($status);
+
+        return $status->url();
+    }
 }

resources/assets/js/components/PostComponent.vue

@@ -125,10 +125,10 @@
             </div>
             <div class="card-body flex-grow-0 py-1">
               <div class="reactions my-1">
-                <button v-bind:class="[reactions.liked ? 'fas fa-heart btn btn-link text-decoration-none text-danger px-0 mr-2 m-0' : 'far fa-heart px-0 mr-2 m-0 like-btn btn btn-link text-decoration-none text-dark']" title="Like" v-on:click="likeStatus"></button>
-                <button class="far fa-comment px-0 mr-2 m-0 btn btn-link text-decoration-none text-dark" title="Comment" v-on:click="commentFocus"></button>
-                <button v-bind:class="[reactions.shared ? 'far fa-share-square px-0 mr-2 m-0 btn btn-link text-decoration-none text-primary' : 'far fa-share-square px-0 mr-2 m-0 share-btn btn btn-link text-decoration-none text-dark']" title="Share" v-on:click="shareStatus"></button>
-                <button v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark btn btn-link text-warning px-0 m-0 text-decoration-none float-right' : 'far fa-bookmark btn btn-link text-dark px-0 m-0 text-decoration-none float-right']" title="Bookmark" v-on:click="bookmarkStatus"></button>
+                <h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus"></h3>
+                <h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus"></h3>
+                <h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus"></h3>
+                <h3 v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 float-right cursor-pointer' : 'far fa-bookmark m-0 float-right cursor-pointer']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
               </div>
               <div class="reaction-counts font-weight-bold mb-0">
                 <span style="cursor:pointer;" v-on:click="likesModal">

resources/assets/js/components/Timeline.vue

@@ -84,9 +84,9 @@
 
 				<div class="card-body">
 					<div class="reactions my-1">
-						<button v-bind:class="[status.favourited ? 'btn-lg h3 fas fa-heart btn btn-link text-decoration-none text-danger px-0 mr-2 m-0' : 'btn-lg h3 far fa-heart px-0 mr-2 m-0 text-decoration-none like-btn btn btn-link text-dark']" title="Like" v-on:click="likeStatus(status, $event)"></button>
-						<button class="far fa-comment px-0 mr-2 m-0 btn btn-link text-dark text-decoration-none" title="Comment" v-on:click="commentFocus(status, $event)"></button>
-						<button v-bind:class="[status.reblogged ? 'far fa-share-square px-0 mr-2 m-0 btn btn-link text-decoration-none text-primary' : 'far fa-share-square px-0 mr-2 m-0 share-btn btn btn-link text-decoration-none text-dark']" title="Share" v-on:click="shareStatus(status, $event)"></button>
+						<h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
+						<h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
+						<h3 v-bind:class="[status.reblogged ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
 					</div>
 
 					<div class="likes font-weight-bold">
@@ -358,8 +358,8 @@
   <b-modal 
   	id="lightbox" 
   	ref="lightboxModal"
-  	hide-header="true"
-  	hide-footer="true"
+  	hide-header
+  	hide-footer
   	centered
   	size="lg"
   	body-class="p-0"
@@ -712,6 +712,10 @@
 					return;
 				}
 
+				if(window.confirm('Are you sure you want to delete this post?') == false) {
+					return;
+				}
+				
 				axios.post('/i/delete', {
 					type: 'status',
 					item: status.id

routes/web.php

@@ -85,6 +85,7 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
             Route::get('timelines/home', 'PublicApiController@homeTimelineApi');
         });
         Route::group(['prefix' => 'v2'], function() {
+            Route::get('config', 'ApiController@siteConfiguration');
             Route::get('discover', 'InternalApiController@discover');
             Route::get('discover/posts', 'InternalApiController@discoverPosts');
             Route::get('profile/{username}/status/{postid}', 'PublicApiController@status');
@@ -97,7 +98,6 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
         });
         Route::group(['prefix' => 'local'], function () {
             Route::get('i/follow-suggestions', 'ApiController@followSuggestions');
-            Route::post('i/more-comments', 'ApiController@loadMoreComments');
             Route::post('status/compose', 'InternalApiController@compose');
         });
     });