macros.html 12 KB
Newer Older
1
{% macro preview(lecture) %}
Andreas Valder's avatar
Andreas Valder committed
2
<li class="list-group-item">
3
4
5
	<a href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture.course.title }}" style="color: #000">
		<div class="hidden-xs">
			<div class="row">
6
				<img class="col-xs-4" style="max-height: 120px; height: auto; width:170px" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
7
				<div class="col-xs-4">
8
					<span>{% if lecture.live %}<span class="label label-danger">Live</span> {% endif %}<strong>{{ lecture.course.short }}</strong>{% if ismod() %} <i>({{lecture.course_id}})</i>{% endif %}</span><br>
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
					<span>{% if ismod() %}ID: {{lecture.id}}{% endif %}</span><br>
					<span>{{ lecture['time'] }}</span>
					{% if lecture['speaker'] %}
						<div class="small">Gehalten von {{ lecture['speaker']|safe }} </div>
					{% endif %}
				</div>
				<div class="col-xs-4">
					<div>{{ lecture['title']|fixnl|safe  }}</div>
					<p style="font-style: italic; color: #777;">{{ lecture['comment']|fixnl|safe }}</p>
				</div>
			</div>
		</div>
		<div class="visible-xs">
			<ul class="list-unstyled">
				<li>
					<img style="width: 100%;" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
				</li>
				<li>
27
					{% if lecture.live %}<span class="label label-danger">Live</span> {% endif %}
28
29
					<strong>{{ lecture.course.short }}</strong> {{ lecture['time'] }}
				</li>
30
				{% if lecture['speaker'] %}
31
32
33
				<li>
					<span class="small">Gehalten von {{ lecture['speaker']|safe }} </span>
				</li>
34
				{% endif %}
35
36
37
38
39
40
41
				<li>
					{{ lecture['title']|fixnl|safe  }}
				</li>
				<li>
					<p style="font-style: italic; color: #777;">{{ lecture['comment']|fixnl|safe }}</p>
				</li>
			</ul>
Andreas Valder's avatar
Andreas Valder committed
42
43
		</div>
	</a>
Andreas Valder's avatar
Andreas Valder committed
44
45
</li>

Andreas Valder's avatar
Andreas Valder committed
46
47
{% endmacro %}

Julian Rother's avatar
Julian Rother committed
48
{% macro player(lecture, videos) %}
Andreas Valder's avatar
Andreas Valder committed
49
<video id="videoplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls data-wasnotplayed="1"  data-setup='{ "plugins" : {"hotkeys": {"seekStep": 15, "enableVolumeScroll": false, "alwaysCaptureHotkeys": true}, "videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": true } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
50
	{% for v in videos|sort(attribute='player_prio', reverse=True) %}
51
		<source type="{{ v.mimetype }}" src="{{ config.VIDEOPREFIX }}/{{ v.path }}" label="{{ v.format_description }}"/>
Andreas Valder's avatar
Andreas Valder committed
52
	{% endfor %}
53
	<track srclang="de" kind="chapters" src="{{ url_for('chapters',lectureid=lecture.id) }}" />
Andreas Valder's avatar
Andreas Valder committed
54
</video>
Andreas Valder's avatar
Andreas Valder committed
55
<script>
56
57
$('#videoplayer').addClass("vjs-16-9");
$('#videoplayer').css("width");
Jan Philipp Hafer's avatar
Jan Philipp Hafer committed
58
$(function() {
Andreas Valder's avatar
Andreas Valder committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
	//resume
	var progress_key = "progress_{{ lecture.id }}";
	var seconds_played;
	if (localStorage) {
		seconds_played = localStorage.getItem(progress_key);
		if (!seconds_played) {
			seconds_played = 0;
		} else {
			videojs('videoplayer').currentTime(seconds_played);
		}
	}
	videojs("videoplayer").on("timeupdate", function() {
		if (localStorage) {
			var player_cur_Time = Math.round(videojs("videoplayer").currentTime());
			if(Math.abs(player_cur_Time - seconds_played) >= 10) {
				seconds_played = player_cur_Time;
				localStorage.setItem( progress_key , seconds_played)
			}
		}

	});

	//autoplay
Jan Philipp Hafer's avatar
Jan Philipp Hafer committed
82
83
84
85
86
87
88
89
90
91
92
	var playerplay = function() {
		if ($('#videoplayer').data("wasnotplayed") == 1) {
			videojs('videoplayer').play();
			$('#videoplayer').data("wasnotplayed","0");
		}
	};
	$(window).focus(playerplay);
	if (document.hasFocus()) {
		playerplay();
	}
});
Andreas Valder's avatar
Andreas Valder committed
93
</script>
Andreas Valder's avatar
Andreas Valder committed
94
{% endmacro %}
95
96

{% macro course_list_item(course,show_semester=False) %}
97
<li class="list-group-item list-group-item-condensed {% if (not course.visible) or (not course.listed) %}list-group-item-danger{% endif %}">
98
	<div class="row">
Andreas Valder's avatar
Andreas Valder committed
99
			{% if show_semester %}
100
				<span class="col-xs-2 col-md-1">
101
					{{ course.semester|semester }}
Andreas Valder's avatar
Andreas Valder committed
102
				</span>
103
				<span class="col-xs-10 col-md-6">
Andreas Valder's avatar
Andreas Valder committed
104
			{% else %}
105
				<span class="col-xs-12 col-md-7">
Andreas Valder's avatar
Andreas Valder committed
106
			{% endif %}
107
				<a href="{{url_for('course', handle=course.handle)}}">
108
					{{ course.title }}{% if ismod() %}<i> ({{course.id}})</i>{% endif %}
109
				</a>
110
			</span>
111
			<span class="col-xs-8 col-md-3">
Andreas Valder's avatar
Andreas Valder committed
112
113
				{{ course.organizer }}
			</span>
114
			<span class="col-xs-4 col-md-2">
Andreas Valder's avatar
Andreas Valder committed
115
116
				{{ course.subject }}
			</span>
117
118
119
	</div>
</li>
{% endmacro %}
Andreas Valder's avatar
Andreas Valder committed
120

121
{% macro video_download_btn(videos) %}
122
 {% if not ismod() %}
123
<span class="btn btn-default dropdown-toggle{% if videos|length is equalto 0 %} disabled{% endif %}" type="button" data-toggle="dropdown">Download <span class="caret"></span></span>
124
<ul class="dropdown-menu">
125
	{% for v in videos|sort(attribute='prio', reverse=True) if (v.downloadable or ismod() ) %}
126
		<li><a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.format_description}} ({{v.file_size|filesizeformat(true)}})</a></li>
127
128
	{% endfor %}
</ul>
129
130
131
132
133
134
{% endif %}
{% if not ismod() %}
<noscript> 
{% else %}
<span>
{% endif %}
135
	<ul class="pull-right list-unstyled" style="margin-left:10px;">
136
		{% for v in videos|sort(attribute='prio', reverse=True) if (v.downloadable or ismod() ) %}
137
		<li>{{moderator_delete(['videos',v.id,'deleted'])}} {{ moderator_checkbox(['videos',v.id,'visible'], v.visible) }} <a href="{{ config.VIDEOPREFIX }}/{{v.path}}">{{v.format_description}} ({{v.file_size|filesizeformat(true)}})</a></li>
138
139
		{% endfor %}
	</ul>
140
141
142
143
144
{% if not ismod() %}
</noscript> 
{% else %}
</span>
{% endif %}
145
146
{% endmacro %}

Andreas Valder's avatar
Andreas Valder committed
147
148
149
150
151
{%macro video_embed_btn(lectureid) %}
<a class="btn btn-default" id="embedcodebtn" data-container="body" data-toggle="popover" data-placement="bottom">
	<span>Einbetten</span>
</a>
<script>
Andreas Valder's avatar
Andreas Valder committed
152
{% set embedcode = '<iframe width="700" height="394" src="'+url_for('embed', id=lectureid, _external=True)+'" frameborder="0" allowfullscreen="true"></iframe>' %}
Andreas Valder's avatar
Andreas Valder committed
153
154
155
156
157
158
159
160
161
162
$('#embedcodebtn').popover(
		{
			html:true,
			title:'Einbettcode',
			content:'<span><input type="text" onclick="this.select()" value="{{embedcode}}"></span>'
		}
		)
</script>
{% endmacro %}

163
{% macro lecture_list_item(lecture,videos,global_permissions) %}
164
<li class="list-group-item" id="lecture-{{lecture.id}}">
Andreas Valder's avatar
Andreas Valder committed
165
	<div class="row">
166
167
168
169
170
171
172
		<div style="background-image: url('{% if not lecture.titlefile %}{{url_for('static',filename='no-thumbnail.png')}}{% else %}{{ config.VIDEOPREFIX }}/{{lecture.titlefile}}'){% endif %}" class="col-sm-2 col-xs-12 thumbnailimg">
		{% if not videos|length is equalto 0 %}
			<a href="{{url_for('lecture', id=lecture.id)}}">
				<span class="glyphicon glyphicon-play-circle playpreviewbtn"></span>
			</a>
		{% endif %}
		</div>
Andreas Valder's avatar
Andreas Valder committed
173
174
		<span class="col-sm-3 col-xs-12">
			<ul class="list-unstyled">
175
				<li>{% if videos|selectattr("live")|list|length %}<span class="label label-danger">Live</span> {% endif %}{{ moderator_editor(['lectures',lecture.id,'title'], lecture.title) }}</li>
176
177
178
				{% if lecture.speaker or ismod() %}<li>Gehalten von {{ moderator_editor(['lectures',lecture.id,'speaker'], lecture.speaker) }}</li>{% endif %}
				<li>{{ moderator_editor(['lectures',lecture.id,'time'], lecture.time) }} </li>
				<li>Dauer: {{ moderator_editor(['lectures',lecture.id,'duration'], lecture.duration) }} min</li>
179
				{% if  ismod() %}
180
				<li>ID: <a href="{{url_for('course',handle=lecture.course.handle)}}#lecture-{{lecture.id}}">{{lecture.id}}</a></i>
181
				{% endif %}
Andreas Valder's avatar
Andreas Valder committed
182
			</ul>
Andreas Valder's avatar
Andreas Valder committed
183
		</span>
Andreas Valder's avatar
Andreas Valder committed
184
		<span class="col-sm-3 col-xs-12">
185
			<ul class="list-unstyled">
186
				<li>{{ moderator_editor(['lectures',lecture.id,'comment'], lecture.comment) }}</li>
Andreas Valder's avatar
Andreas Valder committed
187
				{% if  ismod() %}
188
189
190
				<li>{{ moderator_editor(['lectures',lecture.id,'internal'], lecture.internal) }}</li>
				<li>Sichtbar: {{ moderator_checkbox(['lectures',lecture.id,'visible'], lecture.visible) }}</li>
				<li>Hörsaal: {{ moderator_editor(['lectures',lecture.id,'place'], lecture.place) }} </li>
Andreas Valder's avatar
Andreas Valder committed
191
				{% endif %}
192
			</ul>
Andreas Valder's avatar
Andreas Valder committed
193
		</span>
Andreas Valder's avatar
Andreas Valder committed
194
		<div class="col-sm-4 col-xs-12">
195
			<ul class="list-inline">
Andreas Valder's avatar
Andreas Valder committed
196
				<li class="dropdown">
Andreas Valder's avatar
Andreas Valder committed
197
198
					{{ video_download_btn(videos) }}
				</li>
199
200
				<li class="pull-right">
					{{ moderator_permissioneditor('lecture', lecture.id, lecture.perm, global_permissions) }}
Andreas Valder's avatar
Andreas Valder committed
201
				</li>
202
				<li class="pull-right">
203
					{{ moderator_delete(['lectures',lecture.id,'deleted']) }}
Andreas Valder's avatar
Andreas Valder committed
204
205
206
				</li>
			</ul>
		</div>
Andreas Valder's avatar
Andreas Valder committed
207
208
209
	</div>
</li>
{% endmacro %}
210

211
{% macro moderator_editor (path,value) %}
212
	{% if ismod() %}
213
214
215
216
217
218
	<span class="moderator_editor" data-path="{{path|join('.')}}" >
		<a class="moderator_editor_sign btn btn-default" title="{{path|join('.')}}" data-toggle="tooltip" tabindex="0" style="padding: 3px; margin-right: 5px;">
			<span class="glyphicon glyphicon-pencil"></span>
		</a>
		<span class="moderator_editor_value">{{ value|safe }}</span>
	</span>
219
	{% else %}
220
		{{value|fixnl|safe}}
221
	{% endif %}
222
223
{% endmacro %}

224
{% macro moderator_checkbox (path,value) %}
225
	{% if ismod() %}
226
	<input title="{{path|join('.')}}" data-toggle="tooltip" type="checkbox" data-path="{{path|join('.')}}" {% if value %} checked {% endif %} onchange="moderator.editor.changeboxclick(this)"/>
227
228
	{% endif %}
{% endmacro %}
229

230
{% macro moderator_delete (path) %}
231
	{% if ismod() %}
232
	<button class="btn btn-default" style="background-color: red;" data-path="{{path|join('.')}}" onclick="moderator.editor.deletebtnclick(this)">
Andreas Valder's avatar
Andreas Valder committed
233
234
235
236
237
		<span class="glyphicon glyphicon-trash"></span>
	</button>
	{% endif %}
{% endmacro %}

238
239
240
{% macro moderator_permissioneditor(type,id,perm,global_permissions) %}
	{% set tmp = global_permissions.extend(perm) %}
	{% set permdescription = perm|permdescr %}
241
242
243
244
245
246
247
248
249
	{% set permlogos = '' %}

	{% if permdescription[0] == 'public' %}
		{% set permlogos = '<span class="fa fa-globe" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'password' %}
		{% set permlogos = '<span class="fa fa-lock" aria-hidden="true"></span>' %}
	{% endif %}
	{% if permdescription[0] == 'l2p' %}
250
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 12px; height: 14px; background-size: cover;  background-image: url(\'/static/l2p-logo.gif\');"></span>' %}
251
252
	{% endif %}
	{% if permdescription[0] == 'rwth' %}
253
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover;  background-image: url(\'/static/rwth.png\');"></span>' %}
254
	{% endif %}
255
256
257
	{% if permdescription[0] == 'fsmpi' %}
		{% set permlogos = '<span class="fa" aria-hidden="true" style="width: 25px; height: 20px; background-size: cover;  background-image: url(\'/static/fsmpi.png\');"></span>' %}
	{% endif %}
258
259

	{% if ismod() %}
260
		<button class="btn btn-default modmoderator_permissioneditor" data-type="{{ type }}" data-id="{{ id }}">
261
			{{ permlogos|safe }}	
262
		</button>
Andreas Valder's avatar
Andreas Valder committed
263
	{% else %}
Andreas Valder's avatar
Andreas Valder committed
264
		<span title="{{permdescription[1]}}">
265
			{{ permlogos|safe }}	
Andreas Valder's avatar
Andreas Valder committed
266
		</span>
267
	{% endif %}
Andreas Valder's avatar
Andreas Valder committed
268
	
269
{% endmacro %}
Andreas Valder's avatar
Andreas Valder committed
270
271

{% macro vtttime(time) %}{{ '%02d:%02d:%02d.000'|format( time//3600, (time//60)%60, time%60) }}{% endmacro %}
272

Julian Rother's avatar
Julian Rother committed
273
{% macro stats_viewsperday(id, req, title, type="scatter", param=None, maxtraces=7) %}
274
275
276
<script>
	$.ajax({
		method: "GET",
Julian Rother's avatar
Julian Rother committed
277
		url: "{{url_for('stats_viewsperday', req=req, param=param)}}",
278
279
280
281
		dataType: "json",
		error: moderator.api.handleapierror,
		success: function (data) {
			var traces = [];
Julian Rother's avatar
Julian Rother committed
282
283
284
285
286
			for (var i = 0; i < data.views.length; i++) {
				if (data.views[i].name == 'total' && data.views.length > 2)
					traces.push({"x": data.times, "y": data.views[i].vals, "type": "{{type}}", "name": "gesamt", line: {"color": "black", "width": 2}});
				else
					traces.push({"x": data.times, "y": data.views[i].vals, "type": "{{type}}", "name": data.views[i].name, line: {"width": 1}});
287
			}
Julian Rother's avatar
Julian Rother committed
288
289
290
291
292
293
294
295
296
297
298
299
			traces.sort(function (a, b) {
				amax = 0;
				bmax = 0;
				for (var i = 0; i < a.y.length; i++)
					amax = Math.max(amax, a.y[i]);
				for (var i = 0; i < b.y.length; i++)
					bmax = Math.max(bmax, b.y[i]);
				return bmax-amax;
			});
			for (var i = 0; i < traces.length; i++)
				if (i > {{maxtraces}})
					traces[i].visible = "legendonly";
300
301
302
303
304
305
306
307
308
			var layout = {
				"title": "{{title}}",
				"showlegend": (traces.length != 1)
			};
			Plotly.newPlot("{{id}}", traces, layout, { "modeBarButtonsToRemove": ['sendDataToCloud','hoverCompareCartesian'], "displaylogo": false});
		}
	});
</script>
{% endmacro %}