lecture.html 5.54 KB
Newer Older
Andreas Valder's avatar
Andreas Valder committed
1
{% from 'macros.html' import player %}
Andreas Valder's avatar
Andreas Valder committed
2
3
{% from 'macros.html' import video_download_btn %}
{% from 'macros.html' import video_embed_btn %}
4
{% from 'macros.html' import vtttime %}
5
{% from 'macros.html' import moderator_editor %}
6
{% from 'macros.html' import moderator_editor_time %}
7
8
{% from 'macros.html' import moderator_delete %}
{% from 'macros.html' import moderator_checkbox %}
Andreas Valder's avatar
Andreas Valder committed
9
{% set page_border = 1 -%}
10

Andreas Valder's avatar
Andreas Valder committed
11
{% extends "base.html" %}
12
{% block title %}- {{ course.title }}: {{ lecture.title}}{% endblock %}
13
14
15
{% block header %}
{{ super() }}

16
	<meta property="og:image" content="{{ config.VIDEOPREFIX }}/thumbnail/l_{{lecture.id}}.jpg" />
17
18
19
	<meta property="og:title" content="{{ course.title }}: {{ lecture.title}}" />
	<meta property="og:description" content="{{ lecture.comment }}" />
{% endblock %}
Andreas Valder's avatar
Andreas Valder committed
20
{% block content %}
21
22
<div class="panel panel-default">
	<div class="panel-heading">
23
		<span class="panel-title"><strong><a href="{{url_for('course', handle=course.handle)}}#lecture-{{lecture.id}}">{{ course.title }}</a></strong>: {{ lecture.title}}</span>
24
	</div>
Andreas Valder's avatar
Andreas Valder committed
25
	<div class="panel-body">
Andreas Valder's avatar
Andreas Valder committed
26
		<div class="row" style="padding: 0px;">
27
			<div class="col-xs-12" style="padding-bottom: 5px;">
Andreas Valder's avatar
Andreas Valder committed
28
29
				<a href="{{url_for('course', handle=course.handle)}}#lecture-{{lecture.id}}" class="btn btn-default" >Zur Veranstaltungsseite</a>
				<ul class="list-inline pull-right">
30
					<li>{{ video_embed_btn(lecture.id, course=course.handle) }}</li>
Andreas Valder's avatar
Andreas Valder committed
31
32
					<li class="dropdown">{{ video_download_btn(videos) }}</li>
				</ul>
Andreas Valder's avatar
Andreas Valder committed
33
34
			</div>
		</div>
Andreas Valder's avatar
Andreas Valder committed
35
		<div class="row">
Andreas Valder's avatar
Andreas Valder committed
36
			<div class="col-xs-12" style="padding: 0px">
37
				{{ player(lecture, videos, get_flashed_messages(category_filter=['player'])) }}
Andreas Valder's avatar
Andreas Valder committed
38
			</div>
39
40
41
42
43
			<div class="col-xs-12" style="padding-top: 20px">
				<p>{{ moderator_editor(['lectures',lecture.id,'comment'], lecture.comment) }}</p>
			</div>
			{% if (chapters|length > 0) or ismod() %}
			<div class="col-xs-12 table-responsive" style="padding-top: 10px;">
44
45
46
				<p>Kapitel:
				<button class="btn btn-default" id="hintnewchapter">{% if ismod() %}Neues Kapitel{% else %}Kapitelmarker vorschlagen{% endif %}</button>
				</p>
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
				<table class="table table-hover">
				<tr>
					<th style="width: 130px;">Start</th>
					<th>Kapitel</th>
					{% if ismod() %}
					<th>Sichtbar</th>
					<th></th>
					{% endif %}
				</tr>
				{% for c in chapters|sort(attribute='time') %}
				<tr>
					<td>
						<a href="javascript:videojs('videoplayer').currentTime({{c['time']}})">{{ '%02d:%02d:%02d'|format( c['time']//3600, (c['time']//60)%60, c['time']%60) }}</a>
						<br>
						{% if ismod() %}
							{{ moderator_editor(['chapters',c.id,'time'],c['time'],true) }}
						{% endif %}
					</td>
					<td>{{ moderator_editor(['chapters',c.id,'text'],c['text']|e) }}</td>
					{% if ismod() %}
					<td>{{ moderator_checkbox(['chapters',c.id,'visible'], c.visible) }}</td>
					<td>{{ moderator_delete(['chapters',c.id,'deleted']) }}</td>
					{% endif %}
				</tr>
				{% endfor %}
				</table>
			</div>
			{% endif %}
Andreas Valder's avatar
Andreas Valder committed
75
		</div>
76
77
	</div>
</div>
Andreas Valder's avatar
Andreas Valder committed
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

{% if ismod() %}
<div class="panel panel-default">
        <div class="panel-heading">
                <a data-toggle="collapse" href="#statspanel" class="plotlyresize"><h1 class="panel-title">Statistiken</h1></a>
        </div>
        <div class="row panel-body collapse out panel-collapse" id="statspanel">
                <div class="col-md-6 col-xs-12">
                        <p class="text-center">Zuschauer pro Tag</p>
			<div class="col-xs-12 plot-view" data-url="{{url_for('stats_viewsperday', req="lecture", param=lecture.id)}}"></div>
                </div>
                <div class="col-md-6 col-xs-12">
                        <p class="text-center">Zuschauer im Livestream</p>
			<div class="col-xs-12 plot-view" data-url="{{url_for('stats_generic', req="live_views", param=lecture.id)}}"></div>
                </div>
        </div>
</div>
{% endif %}


98
<script>
99
100
101
102
103
104
105
function hintchapterclick (src) {
	$.ajax({
		method: "GET",
		url: $(src).data('url'),
		data: $(src).serialize(),
		success: function(data)
		{
106
107
108
109
110
111
			{% if not ismod() %}
				alert("Kapitelmarker vorgeschlagen. Danke!");
			{% else %}
				window.location.reload();
			{% endif %}
			$('#hintnewchapter').click();
112
113
114
115
		}
	});
	return false;
}
116
117
118
119
120
$(function() {
	$( "#hintnewchapter" ).popover(
			{
				html:true,
				title:'Kapitelmarkierung vorschlagen',
121
122
				placement: 'bottom',
				container: 'body',
123
124
125
126
127
				content: function() {
					var zeropad = function (num, places) {
						  var zero = places - num.toString().length + 1;
						    return Array(+(zero > 0 && zero)).join("0") + num;
					};
128
					var timestamp = videojs('videoplayer').currentTime()
129
130
131
					var h = zeropad( Math.trunc(timestamp/3600),2);
					var m = zeropad( Math.trunc((timestamp%3600)/60),2);
					var s = zeropad( Math.trunc(timestamp%60),2);
132
					var timeasstring = h+':'+m+':'+s;
133
					return '<form method="post" data-url="{{ url_for('suggest_chapter', lectureid=lecture.id) }}" onSubmit="return hintchapterclick(this);"><input class="form-control" placeholder="00:00.000" name="time" type="text" value="'+timeasstring+'"><br><input class="form-control" placeholder="Kapitel" name="text" type="text"><br><input type="submit" class="btn btn-default" value="{% if ismod() %}Hinzufügen{% else %}Vorschlagen{% endif %}"></form>';
134
				}
135
			})
136

137
});
138
139
140
141
142
143
144
145
146
147
148
149
150
151
$(document).ready(function() {
	$("a.reloadonclose").click(function () {
		var popup = window.open(this.href, this.target);
		if (!popup)
			return true;
		var popup_check = setInterval(function() {
			if (popup.closed) {
				clearInterval(popup_check);
				location.reload();
			};
		}, 500);
		return false;
	});
});
152
</script>
Andreas Valder's avatar
Andreas Valder committed
153
{% endblock %}