Merge pull request #1876 from pixelfed/staging

Staging

public/mix-manifest.json

@@ -3,7 +3,7 @@
     "/js/vendor.js": "/js/vendor.js?id=d2e140b2d43a9b4d085d",
     "/js/ace.js": "/js/ace.js?id=a575b37c2085b5003666",
     "/js/activity.js": "/js/activity.js?id=028cbbe598f925bb3414",
-    "/js/app.js": "/js/app.js?id=dd6385fe5469842fb783",
+    "/js/app.js": "/js/app.js?id=4d381018bf6754a22602",
     "/css/app.css": "/css/app.css?id=293968cda6f2d640178a",
     "/css/appdark.css": "/css/appdark.css?id=cc58358d958b0496f87e",
     "/css/landing.css": "/css/landing.css?id=9af4c611557edf0f7e31",
@@ -18,7 +18,7 @@
     "/js/hashtag.js": "/js/hashtag.js?id=e6b41cab117cb03c7d2a",
     "/js/loops.js": "/js/loops.js?id=ac610897b12207c829b9",
     "/js/mode-dot.js": "/js/mode-dot.js?id=1225a9aac7a93d5d232f",
-    "/js/profile.js": "/js/profile.js?id=a721b61f465ade605990",
+    "/js/profile.js": "/js/profile.js?id=3f928527132e27a36b13",
     "/js/profile-directory.js": "/js/profile-directory.js?id=7160b00d9beda164f1bc",
     "/js/quill.js": "/js/quill.js?id=9b15ab0ae830e7293390",
     "/js/search.js": "/js/search.js?id=22e8bccee621e57963d9",

resources/assets/js/app.js

@@ -99,8 +99,8 @@ window.App.util = {
 			return '<iframe src="'+u+'" class="pixelfed__embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script async defer src="'+window.location.origin +'/embed.js"><\/script>';
 		}),
 		profile: (function(url) {
-			// placeholder
+			let u = url + '/embed';
-			console.error('This method is not supported yet');
+			return '<iframe src="'+u+'" class="pixelfed__embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script async defer src="'+window.location.origin +'/embed.js"><\/script>';
 		})
 	}
 

resources/assets/js/components/Profile.vue

@@ -422,6 +422,9 @@
 			<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
 				Copy Link
 			</div>
+			<div v-if="profile.locked == false" class="list-group-item cursor-pointer text-center rounded text-dark" @click="showEmbedProfileModal">
+				Embed
+			</div>
 			<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
 				Follow
 			</div>
@@ -471,6 +474,21 @@
 			</p>
 		</div>
 	</b-modal>
+	<b-modal ref="embedModal"
+	id="ctx-embed-modal"
+	hide-header
+	hide-footer
+	centered
+	rounded
+	size="md"
+	body-class="p-2 rounded">
+	<div>
+		<textarea class="form-control disabled" rows="1" style="border: 1px solid #efefef; font-size: 14px; line-height: 12px; height: 37px; margin: 0 0 7px; resize: none; white-space: nowrap;" v-model="ctxEmbedPayload"></textarea>
+		<hr>
+		<button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
+		<p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
+	</div>
+</b-modal>
 </div>
 </template>
 <style type="text/css" scoped>
@@ -545,7 +563,9 @@
 				bookmarksPage: 2,
 				collections: [],
 				collectionsPage: 2,
-				isMobile: false
+				isMobile: false,
+				ctxEmbedPayload: null,
+				copiedEmbed: false
 			}
 		},
 		beforeMount() {
@@ -1083,6 +1103,8 @@
 			},
 
 			statusUrl(status) {
+				return status.url;
+
 				if(status.local == true) {
 					return status.url;
 				}
@@ -1091,12 +1113,25 @@
 			},
 
 			profileUrl(status) {
+				return status.url;
+
 				if(status.local == true) {
 					return status.account.url;
 				}
 
 				return '/i/web/profile/_/' + status.account.id;
-			}
+			},
+
+			showEmbedProfileModal() {
+				this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url)
+				this.$refs.embedModal.show();
+			},
+
+			ctxCopyEmbed() {
+				navigator.clipboard.writeText(this.ctxEmbedPayload);
+				this.$refs.embedModal.hide();
+				this.$refs.visitorContextMenu.hide();
+			},
 		}
 	}
 </script>