resolves #456

ProjectSidewalk · Aug 16, 2022 · 90dca94 · 90dca94
1 parent 729e0f5
commit 90dca94
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -110,3 +110,6 @@ nohup.out
 
 # docker db files
 db/dump
+
+#share images
+public/assets/share-images
diff --git a/app/controllers/GalleryController.scala b/app/controllers/GalleryController.scala
@@ -7,13 +7,17 @@ import formats.json.GalleryFormats._
 import models.user._
 import models.label.{LabelTable, LabelTypeTable}
 import models.label.LabelTable._
+import scala.language.postfixOps
 import com.mohiva.play.silhouette.api.{Environment, Silhouette}
 import com.mohiva.play.silhouette.impl.authenticators.SessionAuthenticator
 import play.api.Play
 import play.api.Play.current
 import play.api.mvc._
 import play.api.libs.json.{JsObject, Json, JsError}
 import scala.concurrent.Future
+import java.net.URL
+import java.io.File
+import sys.process._
 
 
 /**
@@ -80,5 +84,14 @@ class GalleryController @Inject() (implicit val env: Environment[User, SessionAu
         }
       }
     )
-  }  
+  }
+
+  def saveShareImage(url: String) = UserAwareAction.async { implicit request =>
+    val filename = java.util.UUID.randomUUID.toString + ".jpg"
+    val file_path = "public/assets/share-images/" + filename
+    Future.successful{
+      new URL(url) #> new File(file_path) !!
+    }
+    Future.successful(Ok(Json.obj("filename" -> filename)))
+  }
 }
diff --git a/app/views/gallery.scala.html b/app/views/gallery.scala.html
@@ -5,6 +5,8 @@
     <head>
         <meta property="og:type" content="website">
         <meta property="og:image" content="https://sidewalk-columbus.cs.washington.edu/assets/assets/sidewalk-logo.png">
+        <meta property="og:image:width" content="720">
+        <meta property="og:image:height" content="480">
         <meta property="og:title" content="Sidewalk Gallery">
         <meta property="og:url" content="https://sidewalk-sea.cs.washington.edu/gallery">
         <meta property="og:description" content="Checkout this accesabilty issue I saw">
@@ -155,27 +157,57 @@ <h5 id="tags-header" class="filter-subheader">@Messages("gallery.tags")</h5>
             $('.facebook').click(function() {
                let share_url =  "https://www.facebook.com/sharer/sharer.php?u=" + current_url;
                window.open(share_url, "_blank");
+                saveImagePost(current_url);
             });
 
             $('.twitter').click(function() {
                 let share_url =  "https://twitter.com/intent/tweet?text=" + title + "&url=" + current_url;
                 window.open(share_url, "_blank");
+                saveImagePost(current_url);
             });
 
             $('.linkedin').click(function() {
                 let share_url =  "https://www.linkedin.com/cws/share?url=" + current_url;
                 window.open(share_url, "_blank");
+                saveImagePost(current_url);
             });
 
             $('.tumblr').click(function() {
                 let share_url =  "http://tumblr.com/widgets/share/tool?canonicalUrl=" + current_url;
                 window.open(share_url, "_blank");
+                saveImagePost(current_url);
             });
 
             $('.copy').click(async function() {
                 navigator.clipboard.writeText(current_url);
                 $('.copy-text').text("copied!")
+                saveImagePost(current_url);
             });
+
+            function saveImagePost(url) {
+                let imageSaveLocation = url.substring(0, url.length - 8) + "/assets/assets/share-images/"
+                // Save the image on server via post request
+                $.ajax({
+                    async: true,
+                    contentType: 'application/json; charset=utf-8',
+                    url: "/saveShareImage?url=" +
+                            encodeURIComponent(document.querySelector('meta[property="og:image"]')
+                                    .getAttribute("content")),
+                    type: 'GET',
+                    dataType: "json",
+                    success: function (result) {
+                        document.querySelector('meta[property="og:image"]').setAttribute("content",
+                                imageSaveLocation + result.filename);
+                        document.querySelector('meta[name="twitter:image"]').setAttribute("content",
+                                imageSaveLocation + result.filename);
+                    },
+                    error: function(xhr, textStatus, error){
+                        console.error(xhr.statusText);
+                        console.error(textStatus);
+                        console.error(error);
+                    }
+                });
+            }
     </script>
 
     <link rel="stylesheet" href='@routes.Assets.at("javascripts/Gallery/build/Gallery.css")'/>

diff --git a/conf/routes b/conf/routes
@@ -170,3 +170,6 @@ GET     /userLabelsToCluster                                 @controllers.Attrib
 GET     /clusteredLabelsInRegion                             @controllers.AttributeController.getClusteredLabelsInRegion(key: String, regionId: Int)
 POST    /singleUserClusteringResults                         @controllers.AttributeController.postSingleUserClusteringResults(key: String, userId: String)
 POST    /multiUserClusteringResults                          @controllers.AttributeController.postMultiUserClusteringResults(key: String, regionId: Int)
+
+# Saving gallery image for open graph sharing
+GET     /saveShareImage                             @controllers.GalleryController.saveShareImage(url: String)
diff --git a/public/javascripts/Gallery/css/modal.css b/public/javascripts/Gallery/css/modal.css
@@ -184,7 +184,7 @@
     border-radius: 6px;
     border-color: black;
     border-style: solid;
-    border-width: 2px;
+    border-width: 1.5px;
     background-color: #fff;
     width: 40%;
     height: 8%;