Merge branch 'feature/sharing' into develop

rowers/templates/embedded_video.html

@@ -7,6 +7,24 @@
 
 
 {% block title %}Workout Video{% endblock %}
+{% block og_title %}{{ analysis.name }}{% endblock %}
+{% block description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
+{% block og_description %}Rowing Video Analysis:{{ analysis.name }}{% endblock %}
+{% block og_image %}
+{% if analysis %}
+<meta property="og:image" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
+<meta property="og:image:secure_url" content="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
+{% else %}
+<meta property="og:image" content="http://rowsandall.com/static/img/logo_r.png" />
+<meta property="og:image:secure_url" content="https://rowsandall.com/static/img/logo_r.png" />
+{% endif %}
+{% endblock %}
+
+{% if analysis %}
+{% block image_src %}
+<link rel="image_src" href="https://img.youtube.com/vi/{{ analysis.video_id }}/hqdefault.jpg" />
+{% endblock %}
+{% endif %}
 
 {% block meta %}
 {% leaflet_js %}
@@ -22,6 +40,18 @@
   });
 });
 </script>
+<script>
+function copyText() {
+  var tempInput = document.createElement("input");
+    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
+    tempInput.value = "https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/";
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    document.execCommand("copy");
+    alert("Copied to clipboard: " + tempInput.value);
+    document.body.removeChild(tempInput);
+}
+</script>
 {% endblock %}
 
 {% block main %}
@@ -80,16 +110,39 @@
       controls
       to move around in the video and play it.</p>
     <p>You can make manual adjustments to the delay to fine tune the alignment.
-      Once you are finished, check "Lock Video and Data" to lock the video and the data.</p>
-    <p>Once you are happy with the alignment, you can save the analysis, and share with other people.</p>
+        Once you are finished, check "Lock Video and Data" to lock the video and the data.</p>
+    <p>Once you are happy with the alignment, you can save the analysis, and
+      share with other people.</p>
   </li>
   {% else %}
   <li class="grid_2">
     <p>Playing the video will advance the data in synchronization. Use the regular
       YouTube controls to move around in the video and play it.</p>
+  </li>
   {% endif %}
-  </ul>
-  <ul class="main-content">
+  {% if analysis %}
+  <li class="grid_2">
+    <span class="fb-share-button" style="height:20px; vertical-align: top;"
+    data-href="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}"
+    data-layout="button" data-size="small" data-mobile-iframe="false">
+      <a class="fb-xfbml-parse-ignore" target="_blank"
+      href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/">
+      Share</a>
+    </span>
+    <span>
+      <a class="twitter-share-button"
+      href="https://twitter.com/intent/tweet"
+      data-url="https://rowsandall.com/rowers/video/{{ analysis.id|encode }}/"
+      data-text="@rowsandall #rowingdata">Tweet</a>
+    </span>
+    <span>
+      <button title="Copy Shareable Link" onclick="copyText()"
+      style="color:#1c75bc;background:none;border:0;"><i class="fas fa-copy"></i></button>
+    </span>
+  </li>
+  {% endif %}
+</ul>
+<ul class="main-content">
   <li class="grid_2">
     <div id="theplot" class="flexplot mapdiv">
       {{ mapdiv | safe}}
@@ -602,6 +655,8 @@ document.getElementById("dataplay").appendChild(dataplay);
 // datastop.value = "Stop";
 // document.getElementById("datastop").appendChild(datastop)
 
+
+
 dataplay.onclick = function() {
   if (lock.checked) {
     dataplaying = false;

rowers/templates/workout_view.html

@@ -19,7 +19,7 @@
 {% block og_description %}{{ workout.name }}
 {{ workout.date }} - {{ workout.distance }}m - {{ workout.duration |durationprint:"%H:%M:%S.%f" }}{% endblock %}
 
-{% for graph in graphs %}
+
 {% block og_image %}
 {% if graphs %}
 {% for graph in graphs %}
@@ -39,7 +39,6 @@
 {% endfor %}
 {% endblock %}
 
-{% endfor %}
 {% block main %}
 
 <h1>{{ workout.name }}</h1>
@@ -63,10 +62,10 @@
     {% endif %}
     <p>
       <div class="fb-share-button"
-           data-href="https://rowsandall.com/rowers/workout/{{ workout.id|encode }}"
+           data-href="https://rowsandall.com/rowers/workout/{{ workout.id|encode }}/"
            data-layout="button" data-size="small" data-mobile-iframe="false">
         <a class="fb-xfbml-parse-ignore" target="_blank"
-           href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/workout/{{ workout.id|encode }}">
+           href="https://www.facebook.com/sharer/sharer.php?u=https://rowsandall.com/rowers/workout/{{ workout.id|encode }}/">
           Share
         </a>
       </div>
@@ -74,7 +73,7 @@
     <p>
       <a class="twitter-share-button"
          href="https://twitter.com/intent/tweet"
-         data-url="https://rowsandall.com/rowers/workout/{{ workout.id|encode }}"
+         data-url="https://rowsandall.com/rowers/workout/{{ workout.id|encode }}/"
          data-text="@rowsandall #rowingdata">Tweet</a>
     </p>
     <table width=100%>
@@ -122,7 +121,7 @@
 
     {{ mapdiv|safe }}
 
-    
+
     {{ mapscript|safe }}
     </div>
   </li>
@@ -132,7 +131,7 @@
     <script async="true" type="text/javascript">
       Bokeh.set_log_level("info");
     </script>
-    
+
     {{ interactiveplot |safe }}
 
     {{ the_div|safe }}
@@ -141,7 +140,7 @@
   {% for graph in graphs %}
   <li>
     <a href="/rowers/graph/{{ graph.id }}/">
-    <img src="/{{ graph.filename }}" 
+    <img src="/{{ graph.filename }}"
 	 onerror="this.src='/static/img/rowingtimer.gif'"
 	 alt="{{ graph.filename }}" width="120" height="100">
     </a>