Video
+
Download video file
diff --git a/xmodule/js/karma_runner_webpack.js b/xmodule/js/karma_runner_webpack.js
index 540a955bb0..c5c4290d60 100644
--- a/xmodule/js/karma_runner_webpack.js
+++ b/xmodule/js/karma_runner_webpack.js
@@ -68,6 +68,7 @@ import './spec/video/video_speed_control_spec.js';
import './spec/video/video_storage_spec.js';
import './spec/video/video_volume_control_spec.js';
import './spec/time_spec.js';
+import './spec/video/social_share_spec.js';
// overwrite the loaded method and manually start the karma after a delay
// Somehow the code initialized in jQuery's onready doesn't get called before karma auto starts
diff --git a/xmodule/js/spec/video/social_share_spec.js b/xmodule/js/spec/video/social_share_spec.js
new file mode 100644
index 0000000000..e09011b9e1
--- /dev/null
+++ b/xmodule/js/spec/video/social_share_spec.js
@@ -0,0 +1,47 @@
+(function() {
+ 'use strict';
+ describe('VideoSocialSharingHandler', function() {
+ var state, spyOpen;
+
+ beforeEach(function() {
+ state = jasmine.initializePlayer('video_all.html');
+ spyOpen = spyOn(window, 'open').and.returnValue(null);
+ window.analytics = jasmine.createSpyObj('analytics', ['track'])
+ });
+
+ afterAll(() => delete window.analytics);
+
+ describe('clicking social share opens the correct URL', function() {
+ const testCases = [
+ {
+ source: 'twitter',
+ url: "https://twitter.com/intent/tweet?text=Here's%20a%20fun%20clip%20from%20a%20class%20I'm%20taking%20on%20%40edXonline.%0A%0A&url="
+ },
+ { source: 'facebook', url: "https://www.facebook.com/sharer/sharer.php?u=" },
+ { source: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=' },
+ ];
+ _.each(testCases, ({ source, url }) => {
+ it(source, () => {
+ var siteShareButton = $(`.social-share-link[data-source="${source}"]`);
+ expect(siteShareButton.length).toEqual(1);
+
+ siteShareButton.trigger('click');
+ expect(spyOpen).toHaveBeenCalledWith(
+ url + `video-share-url%3Futm_source%3D${source}%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-share-exp`,
+ 'targetWindow',
+ 'toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=400'
+ );
+
+ expect(window.analytics.track).toHaveBeenCalledWith(
+ 'edx.social.video.share_button.clicked',
+ {
+ source: source,
+ video_block_id: 'block-v1:coursekey+type@video+block@000000000000000000',
+ course_id: 'course-v1:someOrg+thisCOurse+runAway',
+ }
+ );
+ });
+ });
+ });
+ });
+}).call(this);
\ No newline at end of file
diff --git a/xmodule/js/src/video/036_video_social_sharing.js b/xmodule/js/src/video/036_video_social_sharing.js
new file mode 100644
index 0000000000..d73aa768b2
--- /dev/null
+++ b/xmodule/js/src/video/036_video_social_sharing.js
@@ -0,0 +1,111 @@
+(function(define) {
+ 'use strict';
+ // VideoSocialSharingHandler module.
+ define(
+ 'video/036_video_social_sharing.js', ['underscore', 'gettext'],
+ function(_, gettext) {
+ var VideoSocialSharingHandler, SocialSharingSite, SimpleSocialSharingSite, facebook, linkedin, twitter;
+ /**
+ * Video Social Sharing control module.
+ * @exports video/036_video_social_sharing.js
+ * @constructor
+ * @param {jquery Element} element
+ * @param {Object} options
+ */
+ VideoSocialSharingHandler = function(element, options) {
+ if (!(this instanceof VideoSocialSharingHandler)) {
+ return new VideoSocialSharingHandler(element, options);
+ }
+
+ _.bindAll(this, 'clickHandler');
+
+ this.container = element;
+
+ if (this.container.find('.wrapper-downloads .wrapper-social-share')) {
+ this.initialize();
+ }
+
+ return false;
+ };
+
+ VideoSocialSharingHandler.prototype = {
+ // 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.socialSharingSites = this.getSocialSharingSites()
+ },
+
+ clickHandler: function(event) {
+ var self = this;
+ event.preventDefault();
+ var source = $(event.currentTarget).data('source')
+ var utmQuery = $.param({
+ utm_source: source,
+ utm_medium: 'social',
+ utm_campaign: 'social-share-exp',
+ });
+ var sharedVideoUrl = encodeURIComponent(self.baseVideoUrl + "?" + utmQuery);
+ var socialShareSite = self.socialSharingSites[source];
+ var socialMediaShareLinkUrl = socialShareSite.generateShareUrl(sharedVideoUrl);
+ window.open(
+ socialMediaShareLinkUrl,
+ 'targetWindow',
+ 'toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=400'
+ );
+ self.sendAnalyticsEvent(source);
+ },
+
+ getSocialSharingSites: function() {
+ var socialSharingSites = {},
+ socialSharingSitesList = [
+ twitter, facebook, linkedin
+ ];
+
+ _.each(socialSharingSitesList, function(socialSharingSite) {
+ socialSharingSites[socialSharingSite.name] = socialSharingSite;
+ }, this);
+
+ return socialSharingSites;
+ },
+
+ sendAnalyticsEvent: function(source) {
+ window.analytics.track(
+ 'edx.social.video.share_button.clicked',
+ {
+ source: source,
+ video_block_id: this.container.data('blockId'),
+ course_id: this.container.data('courseId'),
+ }
+ );
+ }
+ };
+
+ // Define the social sharing sites and how they generate
+ // a link to their share page.
+ SocialSharingSite = function(name, generateShareUrl) {
+ // A social sharing site with a name and a function to generate a share URL
+ this.name = name;
+ this.generateShareUrl = generateShareUrl;
+ };
+ SimpleSocialSharingSite = function(name, baseShareUrl) {
+ // A social sharing site with a url that is a static string with the url appended
+ this.name = name;
+ this.generateShareUrl = (url) => baseShareUrl + url;
+ }
+ twitter = new SocialSharingSite(
+ 'twitter',
+ url => {
+ var tweetText = encodeURIComponent(gettext("Here's a fun clip from a class I'm taking on @edXonline.\n\n"));
+ return "https://twitter.com/intent/tweet?text=" + tweetText + "&url=" + url;
+ }
+ );
+ facebook = new SimpleSocialSharingSite('facebook', 'https://www.facebook.com/sharer/sharer.php?u=');
+ linkedin = new SimpleSocialSharingSite('linkedin', 'https://www.linkedin.com/sharing/share-offsite/?url=');
+
+ return VideoSocialSharingHandler;
+ });
+}(RequireJS.define));
diff --git a/xmodule/js/src/video/10_main.js b/xmodule/js/src/video/10_main.js
index eacc1ee13c..e1c8753ed2 100644
--- a/xmodule/js/src/video/10_main.js
+++ b/xmodule/js/src/video/10_main.js
@@ -64,14 +64,15 @@
'video/09_poster.js',
'video/09_completion.js',
'video/10_commands.js',
- 'video/095_video_context_menu.js'
+ 'video/095_video_context_menu.js',
+ 'video/036_video_social_sharing.js'
],
function(
VideoStorage, initialize, FocusGrabber, VideoAccessibleMenu, VideoControl, VideoFullScreen,
VideoQualityControl, VideoProgressSlider, VideoVolumeControl, VideoSpeedControl, VideoAutoAdvanceControl,
VideoCaption, VideoPlayPlaceholder, VideoPlayPauseControl, VideoPlaySkipControl, VideoSkipControl,
VideoBumper, VideoSaveStatePlugin, VideoEventsPlugin, VideoEventsBumperPlugin, VideoPoster,
- VideoCompletionHandler, VideoCommands, VideoContextMenu
+ VideoCompletionHandler, VideoCommands, VideoContextMenu, VideoSocialSharing
) {
/* RequireJS */
var youtubeXhr = null,
@@ -135,6 +136,8 @@
saveStateUrl: state.metadata.saveStateUrl
});
+ VideoSocialSharing(el);
+
if (bumperMetadata) {
VideoPoster(el, {
poster: el.data('poster'),
diff --git a/xmodule/video_block/sharing_sites.py b/xmodule/video_block/sharing_sites.py
new file mode 100644
index 0000000000..60265385b5
--- /dev/null
+++ b/xmodule/video_block/sharing_sites.py
@@ -0,0 +1,80 @@
+"""
+Defines the sharing sites for different social media platforms
+"""
+from collections import namedtuple
+from django.utils.translation import gettext_lazy as _
+from urllib.parse import urlencode
+
+TWITTER_SHARE_MESSAGE = _("Here's a fun clip from a class I'm taking on @edXonline.\n\n")
+
+SharingSiteConfig = namedtuple(
+ 'SharingSiteConfig',
+ [
+ 'name',
+ 'fa_icon_name',
+ 'url_param_name',
+ 'base_share_url',
+ 'additional_site_params'
+ ],
+ defaults=[{}]
+)
+
+TWITTER = SharingSiteConfig(
+ name='twitter',
+ fa_icon_name='fa-twitter-square',
+ url_param_name='url',
+ base_share_url='https://twitter.com/intent/tweet',
+ additional_site_params={'text': TWITTER_SHARE_MESSAGE}
+)
+
+FACEBOOK = SharingSiteConfig(
+ name='facebook',
+ fa_icon_name='fa-facebook-square',
+ url_param_name='u',
+ base_share_url='https://www.facebook.com/sharer/sharer.php'
+)
+
+LINKEDIN = SharingSiteConfig(
+ name='linkedin',
+ fa_icon_name='fa-linkedin-square',
+ url_param_name='url',
+ base_share_url='https://www.linkedin.com/sharing/share-offsite/'
+)
+
+ALL_SHARING_SITES = [
+ TWITTER,
+ FACEBOOK,
+ LINKEDIN,
+]
+
+
+def sharing_sites_info_for_video(video_public_url):
+ """
+ Returns a list of dicts, each containing the name, fa_icon_name, and sharing_url
+ """
+ result = []
+ for sharing_site_config in ALL_SHARING_SITES:
+ sharing_site_info = {
+ 'name': sharing_site_config.name,
+ 'fa_icon_name': sharing_site_config.fa_icon_name,
+ 'sharing_url': sharing_url(
+ video_public_url,
+ sharing_site_config
+ )
+ }
+ result.append(sharing_site_info)
+ return result
+
+
+def sharing_url(video_public_url, sharing_site_config):
+ """
+ Returns the sharing url with the appropriate parameters
+ """
+ share_params = {
+ 'utm_source': sharing_site_config.name,
+ 'utm_medium': 'social',
+ 'utm_campaign': 'social-share-exp',
+ sharing_site_config.url_param_name: video_public_url
+ }
+ share_params.update(sharing_site_config.additional_site_params)
+ return sharing_site_config.base_share_url + '?' + urlencode(share_params)
diff --git a/xmodule/video_block/video_block.py b/xmodule/video_block/video_block.py
index 4f3bdac56d..f0ad304d8f 100644
--- a/xmodule/video_block/video_block.py
+++ b/xmodule/video_block/video_block.py
@@ -59,6 +59,7 @@ from xmodule.x_module import (
from xmodule.xml_block import XmlMixin, deserialize_field, is_pointer_tag, name_to_pathname
from .bumper_utils import bumperize
+from .sharing_sites import sharing_sites_info_for_video
from .transcripts_utils import (
Transcript,
VideoTranscriptsMixin,
@@ -471,6 +472,8 @@ class VideoBlock(
'handout': self.handout,
'hide_downloads': is_public_view or is_embed,
'id': self.location.html_id(),
+ 'block_id': str(self.location),
+ 'course_id': str(self.location.course_key),
'is_embed': is_embed,
'license': getattr(self, "license", None),
'metadata': json.dumps(OrderedDict(metadata)),
@@ -479,6 +482,11 @@ class VideoBlock(
'transcript_download_format': transcript_download_format,
'transcript_download_formats_list': self.fields['transcript_download_format'].values, # lint-amnesty, pylint: disable=unsubscriptable-object
}
+ if self.is_public_sharing_enabled():
+ public_video_url = self.get_public_video_url()
+ template_context['public_sharing_enabled'] = True
+ template_context['public_video_url'] = public_video_url
+ template_context['sharing_sites_info'] = sharing_sites_info_for_video(public_video_url)
# Public video previewing / social media sharing
if self.is_public_sharing_enabled():