feat(FEC-13461): add support for seekFrom clipTo (#34)

### Description of the Changes

add support for `seekFrom` and `clipTo` in share overlay.
new configuration named `enableClipping` which enables rendering the
clipping options; default value is `true`.

also, replacing the twitter logo to the new one.

Solves FEC-13461, FEC-13505

### CheckLists

- [ ] changes have been done against master branch, and PR does not
conflict
- [ ] new unit / functional tests have been added (whenever applicable)
- [ ] test are passing in local environment
- [ ] Travis tests are passing (or test results are not worse than on
master branch :))
- [ ] Docs have been updated

README.md

@@ -58,8 +58,9 @@ Finally, add the bundle as a script tag in your page, and initialize the player
       'share': {
         'shareUrl': 'YOUR SHARE URL', //string - Default will take the parent url
         'embedUrl': 'YOUR EMBED URL', //string
-        'enableTimeOffset': true, //boolean - Default false
-        'useNative': true, //boolean - use native API
+        'enableTimeOffset': true, //boolean - Default true
+        'enableClipping': true, //boolean - Default true
+        'useNative': true, //boolean - use native API, default false
       }
     }
   ...

docs/configuration.md

@@ -6,6 +6,7 @@ Configuration parameters could be provided upon instantiation of the share insta
 var config = {
   shareUrl: '', //will take the current url
   enableTimeOffset: true,
+  enableClipping: true,
   useNative: false
 };
 ```
@@ -17,6 +18,7 @@ var config = {
   shareUrl: string,
   embedUrl: string,
   enableTimeOffset: boolean,
+  enableClipping: boolean,
   useNative: boolean,
   shareOptions: ShareOptions
 }
@@ -51,6 +53,17 @@ var config = {
 
 ##
 
+##
+> ### config.enableClipping
+>
+> ##### Type: `boolean`
+>
+> ##### Default: `true`
+>
+> ##### Description: Whether to show the video clipping options.
+
+##
+
 > ### config.useNative
 >
 > ##### Type: `boolean`

flow-typed/types/share-config.js

@@ -3,6 +3,7 @@ declare type ShareConfig = {
   shareUrl?: string,
   embedUrl: string,
   enableTimeOffset: boolean,
+  enableClipping: boolean,
   useNative: boolean,
   shareOptions?: ShareOptions,
   embedBaseUrl?: string,

src/components/radio-button/radio-button.js

@@ -0,0 +1,32 @@
+// @flow
+/**
+ * @jsx h
+ * @ignore
+ */
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preact} = ui;
+const {h} = preact;
+
+/**
+ * The radio button of video start options
+ * @returns {React$Element<any>} the radio button element
+ */
+export const RadioButton = (): React$Element<any> => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+      <circle cx="9.5" cy="9.89948" r="8.5" fill="black" stroke="#666666" />
+    </svg>
+  );
+};
+
+/**
+ * The selected radio button of video start options
+ * @returns {React$Element<any>} the selected radio button element
+ */
+export const RadioButtonSelected = (): React$Element<any> => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+      <circle cx="9.5" cy="9.89948" r="6" fill="white" stroke="#006EFA" strokeWidth="6" />
+    </svg>
+  );
+};

src/components/share-overlay/_share-overlay.scss

@@ -31,22 +31,60 @@
         }
       }
     }
-    .video-start-options-row {
+    .video-start-options-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
       margin-top: 16px;
-      text-align: center;
 
-      .checkbox {
-        margin-right: 15px;
-      }
-      .form-group {
-        margin: 0;
+      .video-start-options-row {
+        margin-top: 13px;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        .radio-button {
+          font-size: 15px;
+          position: relative;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 14px;
+          width: 120px;
+
+          input {
+            display: none;
+          }
+          label {
+            margin-left: 8px;
+          }
+        }
+        .form-group {
+          margin: 0;
+        }
+
+        .clip-time-slots-container {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          .clip-rectangle {
+            width: 8px;
+            height: 2px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.4);
+            margin-right: 8px;
+            margin-left: 8px;
+          }
+        }
       }
     }
   }
 }
 
 .share-main-container {
-  width: 300px;
+  width: 312px;
   max-width: 100%;
   margin: 0 auto;
   text-align: center;