Use download url on shot if mobile. (#4876) (#4921)

docs/METRICS.md

@@ -307,6 +307,7 @@ These are events that an add-on user can encounter on a shot they own
 30. [x] Click "Copy Image Text" on the context menu `web/copy-image-text/context-menu`
 32. [x] Click Feedback/mailto button `start-feedback/footer`
 31. [x] Click on clip `web/goto-clip/content`
+31. [x] Click on clip in a mobile browser `web/mobile-download/content`
 32. [x] Click the download button `web/download/navbar`
 33. [x] Visit an image directly, when the image isn't embedded directly in a Screenshots shot page, `web/visit/direct-view-owner`
 34. [x] View an image directly, when the image is being shown as part of a Facebook/Twitter style preview (the og:image or twitter:image), `web/visit/direct-view-embedded-owner`

server/src/pages/shot/view.js

@@ -44,16 +44,23 @@ class Clip extends React.Component {
       return null;
     }
     const node = <img id="clipImage" style={{height: "auto", width: Math.floor(clip.image.dimensions.x) + "px", maxWidth: "100%" }} ref={clipImage => this.clipImage = clipImage} src={ clip.image.url } alt={ clip.image.text } />;
+    const clipUrl = this.props.isMobile
+                    ? this.props.downloadUrl
+                    : clip.image.url;
     return <div ref={clipContainer => this.clipContainer = clipContainer} className="clip-container">
       { this.copyTextContextMenu() }
-      <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
+      <a href={ clipUrl } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
         { node }
       </a>
     </div>;
   }
 
   onClickClip() {
-    sendEvent("goto-clip", "content", {useBeacon: true});
+    if (this.props.isMobile) {
+      sendEvent("mobile-download", "content", {useBeacon: true});
+    } else {
+      sendEvent("goto-clip", "content", {useBeacon: true});
+    }
     // Allow default action to continue
   }
 
@@ -84,6 +91,8 @@ class Clip extends React.Component {
 
 Clip.propTypes = {
   clip: PropTypes.object,
+  isMobile: PropTypes.bool,
+  downloadUrl: PropTypes.string,
 };
 
 class Head extends React.Component {