migrate attachments when changing account #56

src/app/components/create-status/media/media.component.html

@@ -1,9 +1,12 @@
 <div *ngFor="let m of media" class="media">
     <div *ngIf="m.attachment === null" class="media__loading" title="{{m.file.name}}">
-        <app-waiting-animation class="waiting-icon status-form__sending--waiting"></app-waiting-animation>
+        <app-waiting-animation class="waiting-icon"></app-waiting-animation>
     </div>
     <div *ngIf="m.attachment !== null" class="media__loaded" title="{{m.file.name}}"
         (mouseleave) ="updateMedia(m)">
+        <div class="media__loaded--migrating" *ngIf="m.isMigrating">
+            <app-waiting-animation class="waiting-icon"></app-waiting-animation>
+        </div>
         <div class="media__loaded--hover">
             <button class="media__loaded--button" title="remove" (click)="removeMedia(m)">
                 <fa-icon [icon]="faTimes"></fa-icon> 

src/app/components/create-status/media/media.component.scss

@@ -18,6 +18,7 @@
         height: 75px;
         border: 1px solid $status-secondary-color;
         position: relative;
+        transition: all .2s;
 
         &--hover {
             position: absolute;
@@ -26,10 +27,20 @@
             left:0;
             right:0;
             z-index: 10;
-            transition: all .2s;
             opacity: 0;
             background: rgba(black, .5); 
         }
+
+        &--migrating{
+            position: absolute;
+            top:0;
+            bottom:0;
+            left:0;
+            right:0;
+            z-index: 20;
+            opacity: 100;
+            background: rgba(black, .7); 
+        }
         
         &:hover &--hover {
             opacity: 100;

src/app/components/create-status/media/media.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { Subscription } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
+import { Store } from '@ngxs/store';
 
 import { MediaService, MediaWrapper } from '../../../services/media.service';
 import { ToolsService } from '../../../services/tools.service';
+import { AccountInfo } from '../../../states/accounts.state';
 
 @Component({
     selector: 'app-media',
@@ -15,18 +17,31 @@ export class MediaComponent implements OnInit, OnDestroy {
     media: MediaWrapper[] = [];
     private mediaSub: Subscription;
 
+    private accounts$: Observable<AccountInfo[]>;
+    private accountSub: Subscription;
+
     constructor(
+        private readonly store: Store,
         private readonly toolsService: ToolsService,
-        private readonly mediaService: MediaService) { }
+        private readonly mediaService: MediaService) {
+            
+        this.accounts$ = this.store.select(state => state.registeredaccounts.accounts);
+    }
 
     ngOnInit() {
         this.mediaSub = this.mediaService.mediaSubject.subscribe((media: MediaWrapper[]) => {
             this.media = media;
         });
+
+        this.accountSub = this.accounts$.subscribe((accounts: AccountInfo[]) => {
+            const selectedAccount = accounts.filter(x => x.isSelected)[0];
+            this.mediaService.migrateMedias(selectedAccount);
+        });
     }
 
     ngOnDestroy(): void {
         this.mediaSub.unsubscribe();
+        this.accountSub.unsubscribe();
     }
 
     removeMedia(media: MediaWrapper): boolean {

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -186,8 +186,8 @@ export class ActionBarComponent implements OnInit, OnDestroy {
         return false;
     }
 
-    private getSelectedAccounts(): AccountInfo[] {
-        var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
-        return regAccounts;
-    }
+    // private getSelectedAccounts(): AccountInfo[] {
+    //     var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
+    //     return regAccounts;
+    // }
 }

src/app/services/media.service.ts

@@ -46,7 +46,7 @@ export class MediaService {
             });
     }
 
-    update(account: AccountInfo, media: MediaWrapper): any {
+    update(account: AccountInfo, media: MediaWrapper) {
         if (media.attachment.description === media.description) return;
 
         this.mastodonService.updateMediaAttachment(account, media.attachment.id, media.description)
@@ -61,7 +61,7 @@ export class MediaService {
             });
     }
 
-    remove(media: MediaWrapper): any {
+    remove(media: MediaWrapper) {
         let medias = this.mediaSubject.value;
         let filteredMedias = medias.filter(x => x.id !== media.id);
         this.mediaSubject.next(filteredMedias);
@@ -71,7 +71,30 @@ export class MediaService {
         this.mediaSubject.next([]);
     }
 
-    // migrate
+    migrateMedias(account: AccountInfo) {
+        let medias = this.mediaSubject.value;
+        medias.forEach(media => {
+            media.isMigrating = true;
+        });
+        this.mediaSubject.next(medias);
+
+        for (let media of medias) {
+            this.mastodonService.uploadMediaAttachment(account, media.file)
+                .then((attachment: Attachment) => {
+                    let currentMedias = this.mediaSubject.value;
+                    let currentMedia = currentMedias.filter(x => x.id === media.id)[0];
+                    if (currentMedia) {
+                        currentMedia.attachment = attachment;
+                        currentMedia.isMigrating = false;
+                        this.mediaSubject.next(currentMedias);
+                    }
+                })
+                .catch((err) => {
+                    this.remove(media);
+                    this.notificationService.notifyHttpError(err);
+                });
+        }
+    }
 }
 
 export class MediaWrapper {