Try to fix remote mastodon interactions

client/src/app/shared/user-subscription/remote-subscribe.component.ts

@@ -11,7 +11,7 @@ import {
   styleUrls: ['./remote-subscribe.component.scss']
 })
 export class RemoteSubscribeComponent extends FormReactive implements OnInit {
-  @Input() account: string
+  @Input() uri: string
   @Input() interact = false
   @Input() showHelp = false
 
@@ -42,19 +42,20 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
     fetch(`https://${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`)
       .then(response => response.json())
       .then(data => new Promise((resolve, reject) => {
+        console.log(data)
+
         if (data && Array.isArray(data.links)) {
-          const link: {
-            template: string
-          } = data.links.find((link: any) =>
-            link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe')
+          const link: { template: string } = data.links.find((link: any) => {
+            return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe'
+          })
 
           if (link && link.template.includes('{uri}')) {
-            resolve(link.template.replace('{uri}', `acct:${this.account}`))
+            resolve(link.template.replace('{uri}', encodeURIComponent(this.uri)))
           }
         }
         reject()
       }))
       .then(window.open)
-      .catch(() => window.open(`https://${hostname}/authorize_interaction?acct=${this.account}`))
+      .catch(err => console.error(err))
   }
 }

client/src/app/shared/user-subscription/subscribe-button.component.html

@@ -41,7 +41,7 @@
       </button>
 
       <button class="dropdown-item" i18n>Subscribe with a Mastodon account:</button>
-      <my-remote-subscribe showHelp="true" account="{{ uriAccount }}"></my-remote-subscribe>
+      <my-remote-subscribe showHelp="true" [uri]="channelUri"></my-remote-subscribe>
 
       <div class="dropdown-divider"></div>
 

client/src/app/shared/user-subscription/subscribe-button.component.ts

@@ -28,19 +28,19 @@ export class SubscribeButtonComponent implements OnInit {
     private videoService: VideoService
   ) { }
 
-  get uri () {
+  get channelHandle () {
     return this.videoChannel.name + '@' + this.videoChannel.host
   }
 
-  get uriAccount () {
-    return this.videoChannel.ownerAccount.name + '@' + this.videoChannel.host
+  get channelUri () {
+    return this.videoChannel.url
   }
 
   ngOnInit () {
     if (this.isUserLoggedIn()) {
-      this.userSubscriptionService.doesSubscriptionExist(this.uri)
+      this.userSubscriptionService.doesSubscriptionExist(this.channelHandle)
         .subscribe(
-          res => this.subscribed = res[this.uri],
+          res => this.subscribed = res[this.channelHandle],
 
           err => this.notifier.error(err.message)
         )
@@ -56,7 +56,7 @@ export class SubscribeButtonComponent implements OnInit {
   }
 
   localSubscribe () {
-    this.userSubscriptionService.addSubscription(this.uri)
+    this.userSubscriptionService.addSubscription(this.channelHandle)
       .subscribe(
         () => {
           this.subscribed = true
@@ -78,7 +78,7 @@ export class SubscribeButtonComponent implements OnInit {
   }
 
   localUnsubscribe () {
-    this.userSubscriptionService.deleteSubscription(this.uri)
+    this.userSubscriptionService.deleteSubscription(this.channelHandle)
         .subscribe(
           () => {
             this.subscribed = false

client/src/app/videos/+video-watch/comment/video-comment-add.component.html

@@ -41,7 +41,7 @@
     <span i18n>
       If you have an account on Mastodon or Pleroma, you can open it directly in their interface:
     </span>
-    <my-remote-subscribe [interact]="true" [account]="getUrl()"></my-remote-subscribe>
+    <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
   </div>
   <div class="modal-footer inputs">
     <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()">

client/src/app/videos/+video-watch/comment/video-comment-add.component.ts

@@ -8,7 +8,6 @@ import { User } from '../../../shared/users'
 import { Video } from '../../../shared/video/video.model'
 import { VideoComment } from './video-comment.model'
 import { VideoCommentService } from './video-comment.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoCommentValidatorsService } from '@app/shared/forms/form-validators/video-comment-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -40,8 +39,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     private videoCommentService: VideoCommentService,
     private authService: AuthService,
     private modalService: NgbModal,
-    private router: Router,
-    private i18n: I18n
+    private router: Router
   ) {
     super()
   }
@@ -124,7 +122,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     return this.form.value['text']
   }
 
-  getUrl () {
+  getUri () {
     return window.location.href
   }
 

server/controllers/static.ts

@@ -156,6 +156,19 @@ staticRouter.use('/.well-known/change-password',
   }
 )
 
+staticRouter.use('/.well-known/host-meta',
+  (_, res: express.Response) => {
+    res.type('application/xml');
+
+    const xml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
+      '<XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">\n' +
+      `  <Link rel="lrdd" type="application/xrd+xml" template="${WEBSERVER.URL}/.well-known/webfinger?resource={uri}"/>\n` +
+      '</XRD>'
+
+    res.send(xml).end()
+  }
+)
+
 // ---------------------------------------------------------------------------
 
 export {