erpnext/www/lms/content.html

{% extends "templates/base.html" %}
{% block title %}{{ content.name or 'Content Page' }}{% endblock %}

{% block head_include %}
	<style>
		.lms-content {
			line-height: 1.8em;
		}

		.lms-content h1 {
			margin-top: 1em;
		}

		.lms-content h2 {
			margin-top: 1em;
		}

		.lms-content h3 {
			margin-top: 0.8em;
		}

		.lms-content h4 {
			margin-top: 0.6em;
		}

		section {
			padding: 5rem 0 5rem 0;
		}
		.plyr--video .plyr__control.plyr__tab-focus,
		.plyr--video .plyr__control:hover,
		.plyr--video .plyr__control[aria-expanded='true'] {
			 background: #5e64ff !important;
		}

		.plyr__control--overlaid:focus,
		.plyr__control--overlaid:hover {
		  background: #5e64ff !important;
		}

		.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
    		background: #5e64ff !important;
		}

		.plyr__menu__container
		.plyr__control[role='menuitemradio'][aria-checked='true']::before {
		  background: #5e64ff;
		}
		.plyr--full-ui input[type='range'] {
		  color: #5e64ff !important;
		}

		.plyr__control--overlaid {
			background: rgba(94, 100, 255, 0.8) !important;
		}
	</style>
	<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
{% endblock %}

{% macro title() %}
	<div class="mb-3">
		<a href="/lms/course?name={{ course }}&program={{ program }}" class="text-muted">
			{{_('Back to Course')}}
		</a>
	</div>
	<div class="lms-title">
		<h2>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h2>
	</div>
{% endmacro %}

{% macro navigation() %}
		{% if previous %}
			<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">{{_('Previous')}}</a>
		{% else %}
			<a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">{{ _('Back to Course') }}</a>
		{% endif %}

		{% if next %}
			<button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">{{_('Next')}}</button>
		{% else %}
			<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">{{_('Finish Topic')}}</button>
		{% endif %}
{% endmacro %}

{% macro video() %}
<div class="mb-5">
	{{ title() }}
	<div class="text-muted">
		{% if content.duration %}
			{{ content.duration }} {{_('Mins')}}
		{% endif %}

		{% if content.publish_date and content.duration%}
			-
		{% endif %}

		{% if content.publish_date %}
			{{_('Published on')}} {{ content.publish_date.strftime('%d, %b %Y') }}
		{% endif %}
	</div>
</div>
<div id="player" data-plyr-provider="{{ content.provider|lower }}" data-plyr-embed-id="{{ content.url }}"></div>
<div class="my-5 lms-content">
	{{ content.description }}
</div>
{% endmacro %}

{% macro article() %}
<div class="mb-5">
	{{ title() }}
	<div class="text-muted">
		{% if content.author or content.publish_date %}
			{{_('Published')}}
		{% endif %}
		{% if content.author %}
			{{_('by')}} {{ content.author }}
		{% endif %}
		{% if content.publish_date %}
			{{_('on')}} {{ content.publish_date.strftime('%d, %b %Y') }}
		{% endif %}
	</div>
</div>
<div class="lms-content">
	{{ content.content }}
</div>
{% endmacro %}

{% macro quiz() %}
<div class="mb-5">
	{{ title() }}
</div>
<div id="quiz-wrapper">
</div>
{% endmacro %}

{% block content %}
<section class="section">
	<div>
		<div class='container pb-5'>
			{% if content_type=='Video' %}
				{{ video() }}
			{% elif content_type=='Article'%}
				{{ article() }}
			{% elif content_type=='Quiz' %}
				{{ quiz() }}
			{% endif %}
			<div class="pull-right" {{ 'hidden' if content_type=='Quiz'}}>
				{{ navigation() }}
			</div>
		</div>
	</div>
</section>
{% endblock %}

{% block script %}
	{% if content_type=='Video' %}
		<script src="https://cdn.plyr.io/3.5.3/plyr.js"></script>
	{% elif content_type == 'Quiz' %}
		<script src='/assets/erpnext/js/education/lms/quiz.js'></script>
	{% endif  %}
	<script>
		{% if content_type == 'Video' %}
			const player = new Plyr('#player');
		{% elif content_type == 'Quiz' %}
			{% if next %}
			const quiz_exit_button = 'Next'
			const next_url = '/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}'
			{% else %}
			const quiz_exit_button = 'Finish Course'
			const next_url = '/lms/course?name={{ course }}&program={{ program }}'
			{% endif %}
			frappe.ready(() => {
				{% if content.is_time_bound %}
					var duration = get_duration("{{content.duration}}")
					var d = frappe.msgprint({
						title: __('Important Notice'),
						indicator: "red",
						message: __(`This is a Time-Bound Quiz. <br><br>
						A timer for <b>${duration}</b> will start, once you click on <b>Proceed</b>. <br><br>
						If you fail to submit before the time is up, the Quiz will be submitted automatically.`),
						primary_action: {
							label: __("Proceed"),
							action: () => {
								create_quiz();
								d.hide();
        					}
						},
						secondary_action: {
							action: () => {
								d.hide();
								window.location.href = "/lms/course?name={{ course }}&program={{ program }}";
							},
							label: __("Go Back"),
						}
					});
				{% else %}
					create_quiz();
				{% endif %}
				function create_quiz() {
					const quiz = new Quiz(document.getElementById('quiz-wrapper'), {
						name: '{{ content.name }}',
						course: '{{ course }}',
						program: '{{ program }}',
						quiz_exit_button: quiz_exit_button,
						next_url: next_url
					})
					window.quiz = quiz;
				}
				function get_duration(seconds){
					var hours = append_zero(Math.floor(seconds / 3600));
					var minutes = append_zero(Math.floor(seconds % 3600 / 60));
					var seconds = append_zero(Math.floor(seconds % 3600 % 60));
					return `${hours}:${minutes}:${seconds}`;
				}
				function append_zero(time) {
					return time > 9 ? time : "0" + time;
				}
			})
		{% endif  %}

		{% if content_type != 'Quiz' %}

		frappe.ready(() => {
			next = document.getElementById('nextButton')
			next.disabled = false;
		})


		function handle(url) {
			opts = {
				method: "erpnext.education.utils.add_activity",
				args: {
					course: "{{ course }}",
					content_type: "{{ content_type }}",
					content: "{{ content.name }}",
					program: "{{ program }}"
				}
			}
			frappe.call(opts).then(res => {
				window.location.href = url;
			})
		}

		{% endif %}
	</script>
{% endblock %}