Embed Video: add skin and social sharing config

cds/modules/fixtures/data/pages/faq.html

@@ -56,15 +56,18 @@ <h2 id="cds-videos">CDS Videos</h2>
 <p><strong><a href="#embed-options" name="embed-options" class="cds-anchor">Are there special options for embedding a video?</a></strong></p>
 <p>Yes, there are several parameters that can be added to the embedding link in order to control the appearance of the embedded video. Below you can find the complete list:</p>
 <dl>
- <dt>autoplay=1</dt><dd>this parameter triggers the auto playing of the video when the page is loaded. Please note that some web browsers turn off the sound for auto-playing videos.</dd>
-  <dt>controlsOff=1</dt><dd>this parameter hides the seeking bar, tool bar and title of the video.</dd>
-  <dt>muted=1</dt><dd>this parameter turns off the sound of the video.</dd>
-  <dt>start=5</dt><dd>this parameter starts playing the video at the 5th second.</dd>
-  <dt>end=30</dt><dd>this parameter stops playing the video at the 30th second.</dd>
-  <dt>subtitlesOff=1</dt><dd>this parameter turns off the subtitles of the video (if they are available).</dd>
-  <dt>subtitles=[lang]</dt><dd>this parameter activates the subtitles automatically. [lang] should be the short code for the available language, e.g. en.</dd>
-  <dt>loop=1</dt><dd>this parameter plays the video in a loop.</dd>
-  <dt>responsive=1</dt><dd>this parameter indicates that the video should fill the container and should be responsive.</dd>
+ <dt>autoplay=1</dt><dd>This parameter triggers the auto playing of the video when the page is loaded. Please note that some web browsers turn off the sound for auto-playing videos.</dd>
+  <dt>controlsOff=1</dt><dd>This parameter hides the seeking bar, tool bar and title of the video.</dd>
+  <dt>muted=1</dt><dd>This parameter turns off the sound of the video.</dd>
+  <dt>start=5</dt><dd>This parameter starts playing the video at the 5th second.</dd>
+  <dt>end=30</dt><dd>This parameter stops playing the video at the 30th second.</dd>
+  <dt>subtitlesOff=1</dt><dd>This parameter turns off the subtitles of the video (if they are available).</dd>
+  <dt>subtitles=[lang]</dt><dd>This parameter activates the subtitles automatically. [lang] should be the short code for the available language, e.g. en.</dd>
+  <dt>loop=1</dt><dd>This parameter plays the video in a loop.</dd>
+  <dt>responsive=1</dt><dd>This parameter indicates that the video should fill the container and should be responsive.</dd>
+  <dt>skin=light</dt><dd>This parameter changes the style and size of the big play button. By default, this parameter is not set, so the default skin is used.</dd>
+  <dt>socialSharing=0</dt><dd>This parameter controls the visibility of the social sharing button. Set to `0` to hide the social sharing button. The default is `1` (enabled).</dd>
+
 </dl>
 <p>Here is an the example of embedding a video that is muted and that will play in a loop:</p>
 <pre><code>&lt;iframe scrolling="no" src="http://videos.cern.ch/video/CERN-VIDEO-2018-002-001?muted=1&loop=1" width="560" height="315" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</code></pre>

cds/modules/previewer/templates/cds_previewer/macros/player.html

@@ -24,6 +24,11 @@
 
       var element = document.createElement('div');
       element.className = 'video-js theo-social-available theoplayer-skin theo-seekbar-above-controls {{ video_classes }}';
+
+      {% if embed_config.skin == 'light' %}
+        element.className += ' light';
+      {% endif %}
+
       if (/(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent)){
         element.className += ' ie-responsive';
       }
@@ -91,7 +96,8 @@
         {% endif %}
         preload: 'auto'
       };
-      {% if theo_config.socialSharing %}
+      {% set socialSharing = embed_config.socialSharing | default(1) | int %}
+      {% if socialSharing == 1 %}
         player.social.items = [
            {
              label : '{{ _("Video link") }}',

cds/modules/previewer/templates/cds_previewer/video/embed.html

@@ -30,7 +30,7 @@
 {%- block javascript %}
   {{ super() }}
 
-  {%- set theo_config = {'socialSharing': True, 'showTitle': True} -%}
+  {%- set theo_config = {'showTitle': True} -%}
 
   {# Create the log view url #}
   {%- set log_media_views_url = config.LOG_USER_ACTIONS_ENDPOINTS.get('media_view', '').format(base_url=config.LOG_USER_ACTIONS_ENDPOINTS.get('base_url', '') , recid=recid) -%}

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

@@ -46,7 +46,7 @@ <h4>Embed</h4>
       <button ngclipboard class="btn btn-default" data-clipboard-target="#copyEmbed" type="button"><i class="fa fa-copy"></i></button>
     </span>
   </div><!-- /input-group -->
-  <div class="cds-video-embed-faq mt-10"><a href="/faq#embed">Read more about embed options</a></div>
+  <div class="cds-video-embed-faq mt-10"><a href="/faq#embed-options">Read more about embed options</a></div>
 </div>
 <!-- /Embed -->
 <!-- /Share -->

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

@@ -65,3 +65,31 @@ video {
 .theo-primary-background {
   background-color: #d9d9d9 !important;
 }
+
+// LIGHT SKIN FOR EMBED PLAY BUTTON
+.theoplayer-skin.light .vjs-big-play-button{
+  width: 10% !important;
+  padding-bottom: 10% !important;
+}
+
+.theoplayer-skin.light .vjs-big-play-button:before {
+  background-size: 100%;
+  content: "";
+  background: url('../../../static/img/play.svg') no-repeat center center;
+  display: block;
+}
+
+.theoplayer-skin.light .vjs-big-play-button:hover {
+  background: none;
+}
+
+/* Hide the default THEOplayer icon */
+.theoplayer-skin.light .theo-big-play-button-svg-container svg {
+  display: none;
+}
+
+// /* Remove default spotlight around button on focus */
+.theoplayer-skin.light:hover .vjs-big-play-button:after,
+.theoplayer-skin.light .vjs-big-play-button:focus:after {
+  opacity: 0;
+}