feature: add share link with timestamp

Author: zubeydecivelek

cds/modules/records/static/templates/cds_records/video/share.html

@@ -1,3 +1,46 @@
+<!-- Share link -->
+<div class="cds-detail-sharelink mb-20 d-flex align-items-center">
+
+  <!-- Share URL + Copy -->
+  <div class="input-group" style="flex:1;">
+    <input id="copyShare"
+           type="text"
+           class="form-control"
+           ng-model="share.link"
+           readonly
+           aria-label="Shareable link" />
+
+    <span class="input-group-btn">
+      <button ngclipboard
+              class="btn btn-default"
+              data-clipboard-target="#copyShare"
+              type="button">
+        <i class="fa fa-copy"></i>
+      </button>
+    </span>
+  </div>
+
+  <!-- Start at -->
+  <div class="sharelink-start">
+    <label class="start-checkbox">
+      <input type="checkbox"
+            ng-model="share.withStart"
+            ng-change="updateShareLink()">
+      Start at:
+    </label>
+
+    <input type="text"
+          class="start-time"
+          placeholder="0:00"
+          ng-disabled="!share.withStart"
+          ng-model="share.startInput"
+          ng-change="updateShareLink()"
+          ng-pattern="/^[0-9:]*$/">
+  </div>
+
+</div>
+<!-- /Share link -->
+
 <!-- Social -->
 <div class="cds-detail-video-social-media mb-20">
   <h4>Social media</h4>

cds/modules/theme/assets/bootstrap3/js/cds_records/cdsRecord.js

@@ -468,6 +468,51 @@ function cdsRecordController($scope, $sce, $http, $timeout, $filter) {
     return cleanTitle;
   };
 
+  $scope.share = {
+    link: window.location.href.split("?")[0],
+    startInput: "0:00",
+    withStart: false,
+  };
+
+  function parseHMS(txt) {
+    if (txt == null) return NaN;
+    txt = String(txt).trim();
+    if (!txt) return NaN;
+    if (!/^\d{1,2}(?::\d{1,2}){0,2}$/.test(txt)) return NaN;
+
+    var parts = txt.split(":").map(Number);
+    if (parts.length === 1) return parts[0]; // ss
+    if (parts.length === 2) return parts[0] * 60 + parts[1]; // mm:ss
+    return parts[0] * 3600 + parts[1] * 60 + parts[2]; // hh:mm:ss
+  }
+
+  $scope.updateShareLink = function () {
+    var url = window.location.href.split("?")[0];
+    if ($scope.share.withStart) {
+      var secs = parseHMS($scope.share.startInput);
+      if (!isNaN(secs) && secs > 0) {
+        url += (url.indexOf("?") === -1 ? "?" : "&") + "t=" + Math.floor(secs);
+      }
+    }
+    $scope.share.link = url;
+  };
+
+  $scope.copyShareLink = function () {
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText($scope.share.link);
+    } else {
+      var tmp = document.createElement("textarea");
+      tmp.value = $scope.share.link;
+      document.body.appendChild(tmp);
+      tmp.select();
+      try {
+        document.execCommand("copy");
+      } catch (e) {}
+      document.body.removeChild(tmp);
+    }
+  };
+
+
   /**
    * Trust iframe url
    * @memberof cdsRecordController

cds/modules/theme/assets/bootstrap3/scss/cds/cds.scss

@@ -1404,4 +1404,44 @@ div[cds-search-results] {
   .in-this-video-panel {
     max-height: calc(100vh - 120px);
   }
+}
+
+
+.cds-detail-sharelink {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.cds-detail-sharelink .input-group {
+  flex: 1 1 420px;
+  margin-right: 10px;
+}
+.sharelink-start {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.sharelink-start .start-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: 500;
+}
+.sharelink-start .start-checkbox input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  transform: scale(1.25);
+}
+.start-time {
+  width: 64px;
+  border: none;
+  color: #ccc;
+  background: transparent;
+  text-align: center;
+  outline: none;
+}
+.sharelink-start:has(input[type="checkbox"]:checked) .start-time {
+  border-bottom: 1px solid #888;
+  color: #333333;
 }