f5904d1223
After applying a "download" property on html5 anchor tag, Download Handout link in a video component initiates a direct download instead of overlaying over the video. Fixed issue: https://github.com/openedx/edx-platform/issues/37081
214 lines
12 KiB
HTML
214 lines
12 KiB
HTML
{% load i18n %}
|
|
|
|
{% if display_name is not None and not is_embed %}
|
|
<h3 class="hd hd-2">{{ display_name|escape }}</h3>
|
|
{% endif %}
|
|
|
|
<div
|
|
id="video_{{ id|escape }}"
|
|
class="video closed"
|
|
data-metadata="{{ metadata|escape }}"
|
|
data-bumper-metadata='{{ bumper_metadata|escape }}'
|
|
data-autoadvance-enabled="{{ autoadvance_enabled|escape }}"
|
|
data-poster='{{ poster|escape }}'
|
|
data-block-id='{{ block_id|escape }}'
|
|
data-course-id='{{ course_id|escape }}'
|
|
tabindex="-1"
|
|
>
|
|
<div class="focus_grabber first"></div>
|
|
|
|
<div class="tc-wrapper">
|
|
<div class="video-wrapper">
|
|
<span tabindex="0" class="spinner" aria-hidden="false"
|
|
aria-label="{% trans 'Loading video player' as tmsg %}{{tmsg|force_escape}}"></span>
|
|
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true"
|
|
aria-label="{% trans 'Play video' as tmsg %}{{tmsg|force_escape}}"></span>
|
|
<div class="video-player-pre"></div>
|
|
<div class="video-player">
|
|
<div id="{{ id|escape }}"></div>
|
|
<h4 class="hd hd-4 video-error is-hidden">{% trans 'No playable video sources found.' as tmsg %}{{tmsg|force_escape}}</h4>
|
|
<h4 class="hd hd-4 video-hls-error is-hidden">
|
|
{% trans 'Your browser does not support this video format. Try using a different browser.' as tmsg %}{{tmsg|force_escape}}
|
|
</h4>
|
|
</div>
|
|
<div class="video-player-post"></div>
|
|
<div class="closed-captions"></div>
|
|
<div class="video-controls is-hidden">
|
|
<div>
|
|
<div class="vcr">
|
|
<div class="vidtime">0:00 / 0:00</div>
|
|
</div>
|
|
<div class="secondary-controls"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="focus_grabber last"></div>
|
|
|
|
<div class="wrapper-video-bottom-section">
|
|
{% if download_video_link or track or handout or public_sharing_enabled and not hide_downloads %}
|
|
<h3 class="hd hd-4 downloads-heading sr"
|
|
id="video-download-transcripts_{{ id|escape }}">{% trans 'Downloads and transcripts' as tmsg %}{{tmsg|force_escape}}</h3>
|
|
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_{{ id|escape }}">
|
|
{% if download_video_link or public_sharing_enabled %}
|
|
<div class="wrapper-download-video">
|
|
<h4 class="hd hd-5">{% trans 'Video' as tmsg %}{{tmsg|force_escape}}</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|escape }}"
|
|
target="{% if not is_video_from_same_origin %}_blank{% else %}_self{% endif %}">
|
|
{% trans "Download video file" as tmsg %}{{ tmsg|force_escape }}
|
|
</a>
|
|
{% endif %}
|
|
{% if download_video_link and public_sharing_enabled %}
|
|
<br>{% endif %}
|
|
{% if sharing_sites_info %}
|
|
<div class="wrapper-social-share">
|
|
<button class="social-toggle-btn btn">
|
|
<span class="icon fa fa-share-alt"></span>
|
|
{% trans 'Share this video' as tmsg %}{{tmsg|force_escape}}
|
|
</button>
|
|
<div hidden class="container-social-share">
|
|
{% trans "Share this video" as tmsg %}{{tmsg|force_escape}}
|
|
<div class="btn-link close-btn">
|
|
<span class="icon fa fa-close"></span>
|
|
</div>
|
|
|
|
{% for sharing_site_info in sharing_sites_info %}
|
|
<a
|
|
class="social-share-link"
|
|
data-source="{{ sharing_site_info.name|escape }}"
|
|
href="{{ sharing_site_info.sharing_url|escape }}"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{% if sharing_site_info.name == "twitter" %}
|
|
<!--
|
|
Twitter now uses the X brand icon, but Font Awesome does not include fa-x-twitter until 6.0
|
|
Upgrading to 6.0 would require lots of leg work becuase all square icons have new name patterns
|
|
ex: fa-facebook-square is now fa-square-facebook
|
|
-->
|
|
<span style="display: inline-block; vertical-align: middle; padding-left: 1px;">
|
|
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="15" width="12.86" viewBox="0 0 448 512">
|
|
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
|
<path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"/>
|
|
</svg>
|
|
</span>
|
|
{% else %}
|
|
<span class="icon fa {{ sharing_site_info.fa_icon_name|escape }}"
|
|
aria-hidden="true"></span>
|
|
{% endif %}
|
|
<span class="sr">
|
|
{% filter force_escape %}{% blocktrans with site=sharing_site_info.name %}Share on {{ site }}{% endblocktrans %}{% endfilter %}
|
|
</span>
|
|
</a>
|
|
{% endfor %}
|
|
|
|
<div class="public-video-url-container">
|
|
<a href="{{ public_video_url|escape }}" class="public-video-url-link">
|
|
{{ public_video_url|escape }}
|
|
</a>
|
|
<div
|
|
class="public-video-copy-btn" data-url="{{ public_video_url|escape }}">
|
|
<span class="icon fa fa-link"></span>
|
|
<span>{% trans "Copy" as tmsg %}{{tmsg|force_escape}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% if track %}
|
|
<div class="wrapper-download-transcripts">
|
|
<h4 class="hd hd-5">{% trans 'Transcripts' as tmsg %}{{tmsg|force_escape}}</h4>
|
|
{% if transcript_download_format %}
|
|
<ul class="list-download-transcripts">
|
|
{% for item in transcript_download_formats_list %}
|
|
<li class="transcript-option">
|
|
<span class="icon fa fa-download" aria-hidden="true"></span>
|
|
<a class="btn btn-link" href="{{ track|escape }}"
|
|
data-value="{{ item.value|escape }}">
|
|
{% filter force_escape %}{% blocktrans with file=item.display_name %}Download {{ file }}{% endblocktrans %}{% endfilter %}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<a class="btn-link external-track" href="{{ track|escape }}">{% trans 'Download transcript' as tmsg %}{{tmsg|force_escape}}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% if handout %}
|
|
<div class="wrapper-handouts">
|
|
<h4 class="hd hd-5">{% trans 'Handouts' as tmsg %}{{tmsg|force_escape}}</h4>
|
|
<a class="btn-link" href="{{ handout|escape }}" download>{% trans 'Download Handout' as tmsg %}{{tmsg|force_escape}}</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% if transcript_feedback_enabled and video_id %}
|
|
<div class="wrapper-transcript-feedback" data-video-id="{{ video_id|escape }}" data-user-id="{{ user_id|escape }}">
|
|
<h4 class="hd hd-5">{% trans 'How is the transcript quality?' as tmsg %}{{tmsg|force_escape}}</h4>
|
|
<div class="transcript-feedback-buttons">
|
|
<div class="transcript-feedback-btn-wrapper">
|
|
<button class="thumbs-up-btn">
|
|
<span class="icon fa fa-thumbs-o-up thumbs-up-icon"></span>
|
|
</button>
|
|
</div>
|
|
<div class="transcript-feedback-btn-wrapper">
|
|
<button class="thumbs-down-btn">
|
|
<span class="icon fa fa-thumbs-o-down thumbs-down-icon"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="google-disclaimer">
|
|
<a href="https://translate.google.com/" target="_blank">
|
|
<img
|
|
width="200"
|
|
id="google-translate-logo"
|
|
src="https://learning.edx.org/d4ab1b25143ecad62d69d855b00e7313.png"
|
|
alt="Translated by Google logo"
|
|
>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if cdn_eval %}
|
|
{{ cdn_exp_group|json_script:"cdnExpGroup" }}
|
|
|
|
<script>
|
|
//TODO: refactor this js into a separate file.
|
|
function sendPerformanceBeacon(id, expgroup, value, event_name) {
|
|
var data = {event: event_name, id: id, expgroup: expgroup, value: value, page: "html5vid"};
|
|
$.ajax({method: "POST", url: "/performance", data: data});
|
|
}
|
|
var cdnStartTime;
|
|
var salt = Math.floor((1 + Math.random()) * 0x100000).toString(36);
|
|
var id = "{{ id|escapejs }}";
|
|
|
|
function initializeCDNExperiment() {
|
|
var cdnData = JSON.parse(document.getElementById('cdnExpGroup').textContent);
|
|
sendPerformanceBeacon(id + "_" + salt, cdnData, "", "load");
|
|
cdnStartTime = Date.now();
|
|
|
|
$.each(['loadstart', 'abort', 'error', 'stalled', 'loadedmetadata',
|
|
'loadeddata', 'canplay', 'canplaythrough', 'seeked'], function(index, eventName) {
|
|
$("#video_" + id).bind("html5:" + eventName, null, function () {
|
|
var timeElapsed = Date.now() - cdnStartTime;
|
|
sendPerformanceBeacon(id + "_" + salt, cdnData, timeElapsed, eventName);
|
|
});
|
|
});
|
|
}
|
|
$("#video_" + id).bind("initialize", null, initializeCDNExperiment);
|
|
if ($("#video_" + id).hasClass("is-initialized")) {
|
|
initializeCDNExperiment();
|
|
}
|
|
</script>
|
|
{% endif %}
|