From 2df14a87186b2edd07ccbf136f5e4495c366ef6f Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Tue, 6 Jun 2023 10:09:48 -0400
Subject: [PATCH] feat: add public video url copy interface (#32293)

---
 lms/templates/video.html                      | 64 +++++++++++++++----
 .../js/src/video/036_video_social_sharing.js  | 28 +++++++-
 2 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/lms/templates/video.html b/lms/templates/video.html
index 6a6e7d62c4..c3a9e08e03 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -54,33 +54,70 @@ from openedx.core.djangolib.js_utils import (
         % if download_video_link or public_sharing_enabled:
             <div class="wrapper-download-video">
                 <h4 class="hd hd-5">${_('Video')}</h4>
+                % if download_video_link:
+                    <span class="icon fa fa-download" aria-hidden="true"></span>
+                    <a class="btn-link video-sources video-download-button" href="${download_video_link}">
+                        ${_('Download video file')}
+                    </a>
+                % endif
+                % if download_video_link and public_sharing_enabled:
+                    <br>
+                % endif
                 % if sharing_sites_info:
                     <div class="wrapper-social-share">
-                        <span class="icon fa fa-share-alt" aria-hidden="true"></span>
-                        ${_('Share on:')}
-                        % for sharing_site_info in sharing_sites_info:
+                        <button
+                            style="background-image: none; background-color: rgb(0, 38, 43); border-radius: 0px; color: white" 
+                            class="social-toggle-btn btn"
+                        >
+                            <span class="icon fa fa-share-alt mr-2" style="text-shadow: none"></span>
+                            ${_('Share this video')}
+                        </button>
+                        <div
+                            hidden
+                            class="container-social-share color-black p-2"
+                            style="width: 300px; border-radius: 6px; background-color: white; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15),0 .25rem .625rem rgba(0,0,0,.15)"
+                        >
+                            ${_('Share this video')}
+                            <div class="btn-link close-btn float-right">
+                                <span style="color: black" class="icon fa fa-close" />
+                            </div>
+
+                            <br />
+                            % for sharing_site_info in sharing_sites_info:
                             <a
                                 class="btn-link social-share-link"
                                 data-source="${sharing_site_info['name']}"
                                 href="${sharing_site_info['sharing_url']}"
                                 target="_blank"
                                 rel="noopener noreferrer"
+                                style="font-size: 1.5rem"
                             >
                                 <span class="icon fa ${sharing_site_info['fa_icon_name']}" aria-hidden="true"></span>
                                 <span class="sr">${_("Share on {site}").format(site=sharing_site_info['name'])}</span>
                             </a>
-                        % endfor
+                            % endfor
+                            <br />
+                            <div style="background-color: #F2F0EF" class="public-video-url-container p-2">
+                                <a href=${public_video_url} class="d-inline-block align-middle" style="width: 200px">
+                                    <div
+                                        class="text-nowrap"
+                                        style="color: black; overflow: hidden; text-overflow: ellipsis; vertical-align: middle"
+                                    >
+                                        ${public_video_url}
+                                    </div>
+                                </a>
+                                <div
+                                    class="public-video-copy-btn btn-link d-inline-block float-right"
+                                    data-url=${public_video_url}
+                                >
+                                    <span class="icon fa fa-link pr-1"></span>
+                                    <span>${_('Copy')}</span>
+                                </div>
+                              <span>
+                            </div>
+                        </div>
                     </div>
                 % endif
-                % if download_video_link and public_sharing_enabled:
-                    <br>
-                % endif
-                % if download_video_link:
-                    <span class="icon fa fa-download" aria-hidden="true"></span>
-                    <a class="btn-link video-sources video-download-button" href="${download_video_link}">
-                        ${_('Download video file')}
-                    </a>
-                % endif
             </div>
         % endif
         % if track:
@@ -116,6 +153,7 @@ from openedx.core.djangolib.js_utils import (
     </div>
     % endif
 </div>
+
 % if cdn_eval:
 <script>
   //TODO: refactor this js into a separate file.
diff --git a/xmodule/js/src/video/036_video_social_sharing.js b/xmodule/js/src/video/036_video_social_sharing.js
index 6ab363eaec..cdc5ab32c6 100644
--- a/xmodule/js/src/video/036_video_social_sharing.js
+++ b/xmodule/js/src/video/036_video_social_sharing.js
@@ -20,6 +20,9 @@
                 }
 
                 _.bindAll(this, 'clickHandler');
+                _.bindAll(this, 'copyHandler');
+                _.bindAll(this, 'hideHandler');
+                _.bindAll(this, 'showHandler');
 
                 this.container = element;
 
@@ -35,10 +38,19 @@
                 // Initializes the module.
                 initialize: function() {
                     this.el = this.container.find('.wrapper-social-share');
-                    this.el.on('click', '.btn-link', this.clickHandler);
                     this.baseVideoUrl = this.el.data('url');
                     this.course_id = this.container.data('courseId');
                     this.block_id = this.container.data('blockId');
+                    this.el.on('click', '.social-share-link', this.clickHandler);
+
+                    this.closeBtn = this.el.find('.close-btn');
+                    this.toggleBtn = this.el.find('.social-toggle-btn');
+                    this.copyBtn = this.el.find('.public-video-copy-btn');
+                    this.shareContainer = this.el.find('.container-social-share');
+                    this.closeBtn.on('click', this.hideHandler);
+                    this.toggleBtn.on('click', this.showHandler);
+                    this.copyBtn.on('click', this.copyHandler);
+                  
                 },
 
                 // Fire an analytics event on share button click.
@@ -48,6 +60,20 @@
                     self.sendAnalyticsEvent(source);
                 },
 
+                hideHandler: function(event) {
+                  this.shareContainer.hide();
+                  this.toggleBtn.show();
+                },
+
+                showHandler: function(event) {
+                  this.shareContainer.show();
+                  this.toggleBtn.hide();
+                },
+
+                copyHandler: function(event) {
+                  navigator.clipboard.writeText(this.copyBtn.data('url'));
+                },
+
                 // Send an analytics event for share button tracking.
                 sendAnalyticsEvent: function(source) {
                     window.analytics.track(