Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add public video url copy interface (#32293)

Browse Source
This commit is contained in:
Ben Warzeski
2023-06-06 10:09:48 -04:00
committed by GitHub
parent ddf32206af
commit 2df14a8718
2 changed files with 78 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
lms/templates/video.html
View File

@@ -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.

28
xmodule/js/src/video/036_video_social_sharing.js
View File

@@ -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(