Merge branch 'MLAB-615' into 'testing'

Added a video player for each template card

See merge request !147

css/m4lab.css

@@ -626,4 +626,8 @@ justify-content:space-evenly;}
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 10px; /* Some padding */
   font-size: 18px; /* Increase font size */
+}
+
+.video-tutorial {
+  width: 100%;
 }
\ No newline at end of file

help/gitlab-pages.html

@@ -556,6 +556,11 @@
                                 </div>
                                 <div id="collapse7t" class="card-body collapse">
                                     <p>Dies is eine Vorlage mit einer einzigen Seite. Um den Inhalt anzupassen, ändern Sie die Datei index.html.</p>
+                                    <video class="video-tutorial" playsinline controls>
+                                        <source src="videos/reactive.mp4" type="video/mp4" />
+                                        <track kind="captions" label="German" src="videos/reactive_de.vtt" srclang="de" default />
+                                        <track kind="captions" label="English" src="videos/reactive_en.vtt" srclang="en" default />
+                                    </video>
                                 </div>
                             </div>
 
@@ -573,6 +578,11 @@
                                         Diese Vorlage hat eine einzelne Seite und ist für die Präsentation einer Studienarbeit (Bachelor- / Masterarbeit) gedacht. Im Home-Ordner müssen Sie die Dateien für Ihre Titelseite und die pdf Ihrer Arbeit austauschen. Klicken Sie dazu auf den 'Replace'-Knopf 
                                         <img src="/img/help/cover_thesis.png" width="95%"/>
                                         Anschließend müssen in der Datei index.html Ihr Name, das Jahr etc. angepasst werden.
+                                        <video class="video-tutorial" playsinline controls>
+                                            <source src="videos/geology.mp4" type="video/mp4" />
+                                            <track kind="captions" label="German" src="videos/geology_de.vtt" srclang="de" default />
+                                            <track kind="captions" label="English" src="videos/geology_en.vtt" srclang="en" default />
+                                        </video>
                                     </p>
                                 </div>
                             </div>
@@ -595,23 +605,14 @@
                                         Die Startseite deutet dabei immer auf den Ordner home, wenn Sie also die Startseite ändern wollen, müssen Sie den Ordner in 'home' umbenennen.
                                     </p>
                                     <img src="/img/help/generic.png"/>
+                                    <video class="video-tutorial" playsinline controls>
+                                        <source src="videos/serene.mp4" type="video/mp4" />
+                                        <track kind="captions" label="German" src="videos/serene_de.vtt" srclang="de" default />
+                                        <track kind="captions" label="English" src="videos/serene_en.vtt" srclang="en" default />
+                                    </video>
                                 </div>
-                            </div>    
-                            
-                            <br/>
-                            
-                            <div class="card">
-                                <div class="card-header">
-                                    <h3 class="card-title">
-                                        <a class="collapsed" data-toggle="collapse" href="#collapse10t" aria-expanded="false" aria-controls="collapse10t">
-                                        <small>Videoanleitung</small></a>
-                                    </h3>
-                                </div>
-                                <div id="collapse10t" class="card-body collapse">
-                                    <video id="player" playsinline controls></video>
-                                    <button id="next">Next</button>
-                                </div>
-                            </div>  
+                            </div>
+                        
 
                         </div>
                 </div>
@@ -662,7 +663,6 @@
 <script src="/js/headfoot.js"></script>
 <script src="/js/mobile.js"></script>
 <script src="https://cdn.plyr.io/3.6.9/plyr.js"></script>
-<script src="/js/player.js"></script>
 
 </body>
 

help/videos/geology_de.vtt

-WEBVTT
-
-1
-00:00:21.471 --> 00:00:26.643
-Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
-
-2
-00:00:52.343 --> 00:00:57.114
-Öffnen Sie Ihr Projekt im Transferportal gitlab
-
-3
-00:01:03.114 --> 00:01:08.171
-Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch
-
-4
-00:01:56.929 --> 00:02:01.157
-Laden Sie die Diagrammfigur in den Home-Ordner hoch
-
-5
-00:02:16.328 --> 00:02:21.541
-Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer
-
-6
-00:04:21.043 --> 00:04:24.329
-Entfernen Sie den persönlichen Website-Eintrag
-
-7
-00:05:23.686 --> 00:05:25.243
-Speichern Sie die Änderungen
-
-8
-00:05:34.243 --> 00:05:36.114
-Bearbeiten Sie die Startseite
-
-9
-00:06:51.329 --> 00:06:54.271
-Ändern Sie die Quelle des Bildes
-
-10
-00:07:25.986 --> 00:07:29.914
-Entfernen Sie den Rest des Vorlageninhalts
-
-11
-00:08:00.057 --> 00:08:01.714
-Speichern Sie die Änderungen
-
-12
-00:08:14.186 --> 00:08:18.814
-Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird
-
-13
-00:08:40.771 --> 00:08:42.414
-Immer noch am arbeiten...
-
-14
-00:08:50.271 --> 00:08:52.943
-Ihre Webseite ist veröffentlicht
-
-15
-00:09:11.086 --> 00:09:12.429
-Besuchen Sie die URL
-
+WEBVTT
+
+00:00:27.214 --> 00:00:32.386
+Melden Sie sich bei Ihrem Portalkonto an 
+und erstellen Sie ein neues Projekt
+
+00:01:03.843 --> 00:01:08.614
+Öffnen Sie Ihr Projekt im Transferportal gitlab
+
+00:01:18.971 --> 00:01:24.029
+Laden Sie Logos oder Bilder 
+in den öffentlichen Ordner hoch
+
+00:01:56.371 --> 00:02:01.586
+Bearbeiten Sie die Einstellungen 
+für die Seite und die Teilnehmer
+
+00:03:45.850 --> 00:03:48.867
+Entfernen Sie den zweiten Teilnehmer
+
+00:04:23.133 --> 00:04:24.700
+Speichern Sie die Änderungen
+
+00:04:34.500 --> 00:04:37.467
+Ersetzen Sie das Cover der Abschlussarbeit
+
+00:04:59.167 --> 00:05:01.850
+Ersetzen Sie die PDF-Datei der Abschlussarbeit
+
+00:05:40.150 --> 00:05:42.017
+Bearbeiten Sie die Startseite
+
+00:08:06.683 --> 00:08:08.350
+Speichern Sie die Änderungen
+
+00:08:15.200 --> 00:08:19.833
+Warten Sie einige Sekunden, 
+bis die Webseite veröffentlicht wird
+
+00:08:21.033 --> 00:08:23.717
+Ihre Webseite ist veröffentlicht
+
+00:08:34.250 --> 00:08:35.583
+Besuchen Sie die URL
\ No newline at end of file

help/videos/geology_en.vtt

 WEBVTT
 
 1
-00:00:21.471 --> 00:00:26.643
+00:00:27.214 --> 00:00:32.386
 Sign into your portal account
 and create a new project
 
 2
-00:00:52.343 --> 00:00:57.114
+00:01:03.843 --> 00:01:08.614
 Open your project in the transfer portal gitlab
 
 3
-00:01:03.114 --> 00:01:08.171
-Upload the logo
-and the images into the public folder
+00:01:18.971 --> 00:01:24.029
+Upload any logos
+or images into the public folder
 
 4
-00:01:56.929 --> 00:02:01.157
-Upload the chart figure
-into the home folder
+00:01:56.371 --> 00:02:01.586
+Edit the settings for the 
+page and the participants
 
 5
-00:02:16.328 --> 00:02:21.541
-Edit the settings for the
-page and the participants
+00:03:45.850 --> 00:03:48.867
+Remove the second participant
 
 6
-00:04:21.043 --> 00:04:24.329
-Remove the personal website entry
+00:04:23.133 --> 00:04:24.700
+Save the changes
 
 7
-00:05:23.686 --> 00:05:25.243
-Save the changes
+00:04:34.500 --> 00:04:37.467
+Replace the cover of the thesis
 
 8
-00:05:34.243 --> 00:05:36.114
-Edit the home page
+00:04:59.167 --> 00:05:01.850
+Replace the thesis PDF file
 
 9
-00:06:51.329 --> 00:06:54.271
-Change the source of the image
+00:05:40.150 --> 00:05:42.017
+Edit the home page
 
 10
-00:07:25.986 --> 00:07:29.914
-Remove the rest of the template content
-
-11
-00:08:00.057 --> 00:08:01.714
+00:08:06.683 --> 00:08:08.350
 Save the changes
 
-12
-00:08:14.186 --> 00:08:18.814
+11
+00:08:15.200 --> 00:08:19.833
 Wait a few seconds for the web page
 to be published
 
-13
-00:08:40.771 --> 00:08:42.414
-Still working...
-
-14
-00:08:50.271 --> 00:08:52.943
+12
+00:08:21.033 --> 00:08:23.717
 Your web page is published
 
-15
-00:09:11.086 --> 00:09:12.429
+13
+00:08:34.250 --> 00:08:35.583
 Visit the URL
 

help/videos/reactive_de.vtt

@@ -2,7 +2,8 @@ WEBVTT
 
 1
 00:00:21.471 --> 00:00:26.643
-Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
+Melden Sie sich bei Ihrem Portalkonto an 
+und erstellen Sie ein neues Projekt
 
 2
 00:00:52.343 --> 00:00:57.114
@@ -10,15 +11,18 @@ Melden Sie sich bei Ihrem Portalkonto an und erstellen Sie ein neues Projekt
 
 3
 00:01:03.114 --> 00:01:08.171
-Laden Sie das Logo und die Bilder in den öffentlichen Ordner hoch
+Laden Sie das Logo und die Bilder 
+in den öffentlichen Ordner hoch
 
 4
 00:01:56.929 --> 00:02:01.157
-Laden Sie die Diagrammfigur in den Home-Ordner hoch
+Laden Sie die Diagrammfigur 
+in den Home-Ordner hoch
 
 5
 00:02:16.328 --> 00:02:21.541
-Bearbeiten Sie die Einstellungen für die Seite und die Teilnehmer
+Bearbeiten Sie die Einstellungen 
+für die Seite und die Teilnehmer
 
 6
 00:04:21.043 --> 00:04:24.329
@@ -46,7 +50,8 @@ Speichern Sie die Änderungen
 
 12
 00:08:14.186 --> 00:08:18.814
-Warten Sie einige Sekunden, bis die Webseite veröffentlicht wird
+Warten Sie einige Sekunden, 
+bis die Webseite veröffentlicht wird
 
 13
 00:08:40.771 --> 00:08:42.414

help/videos/serene_de.vtt

+WEBVTT
+
+00:00:20.271 --> 00:00:25.443
+Melden Sie sich bei Ihrem Portalkonto an 
+und erstellen Sie ein neues Projekt
+
+00:00:48.514 --> 00:00:53.286
+Öffnen Sie Ihr Projekt im Transferportal gitlab
+
+00:00:58.043 --> 00:01:03.100
+Laden Sie Logos oder Bilder 
+in den öffentlichen Ordner hoch
+
+00:02:17.243 --> 00:02:22.457
+Bearbeiten Sie die Einstellungen 
+für die Seite und die Teilnehmer
+
+00:03:16.817 --> 00:03:18.817
+Bearbeiten Sie die Menüpunkte
+
+00:04:17.933 --> 00:04:20.133
+Bearbeiten Sie die Teilnehmer
+
+00:05:18.783 --> 00:05:21.800
+Entfernen Sie den persönlichen Website-Eintrag
+
+00:06:21.717 --> 00:06:23.283
+Speichern Sie die Änderungen
+
+00:06:52.333 --> 00:06:54.200
+Bearbeiten Sie die Startseite
+
+00:08:15.667 --> 00:08:19.467
+Entfernen Sie den Rest des Vorlageninhalts
+
+00:08:54.433 --> 00:08:56.717
+Restlichen Text hinzufügen
+
+00:09:40.317 --> 00:09:41.983
+Speichern Sie die Änderungen
+
+00:10:04.833 --> 00:10:07.117
+Ergebnisseite erstellen
+
+00:10:16.917 --> 00:10:20.467
+Kopieren Sie den Inhalt der Rohvorlage
+
+00:10:33.850 --> 00:10:38.317
+Erstellen Sie einen neuen Ordner im öffentlichen Ordner
+
+00:10:51.600 --> 00:10:54.417
+Erstellen Sie eine neue index.html-Datei
+
+00:11:06.950 --> 00:11:10.267
+Fügen Sie den Inhalt der Vorlage ein
+
+00:11:14.583 --> 00:11:15.933
+Speicher die Datei
+
+00:11:24.600 --> 00:11:26.750
+Laden Sie das Diagrammbild hoch
+
+00:11:42.333 --> 00:11:44.533
+Bearbeiten Sie die Ergebnisseite
+
+00:13:04.750 --> 00:13:07.900
+Ändern Sie die Quelle des Bildes
+
+00:13:34.050 --> 00:13:37.883
+Entfernen Sie den Rest des Vorlageninhalts
+
+00:14:07.500 --> 00:14:09.133
+Speichern Sie die Änderungen
+
+00:14:20.367 --> 00:14:25.000
+Warten Sie einige Sekunden, 
+bis die Webseite veröffentlicht wird
+
+00:14:33.767 --> 00:14:36.450
+Ihre Webseite ist veröffentlicht
+
+00:14:45.183 --> 00:14:46.517
+Besuchen Sie die URL
\ No newline at end of file

help/videos/serene_en.vtt

+WEBVTT
+
+1
+00:00:20.271 --> 00:00:25.443
+Sign into your portal account
+and create a new project
+
+2
+00:00:48.514 --> 00:00:53.286
+Open your project in the transfer portal gitlab
+
+3
+00:00:58.043 --> 00:01:03.100
+Upload any logos
+or images into the public folder
+
+4
+00:02:17.243 --> 00:02:22.457
+Edit the settings for the 
+page and the participants
+
+5
+00:03:16.817 --> 00:03:18.817
+Edit the menu items
+
+6
+00:04:17.933 --> 00:04:20.133
+Edit the participants
+
+7
+00:05:18.783 --> 00:05:21.800
+Remove the personal website entry
+
+8
+00:06:21.717 --> 00:06:23.283
+Save the changes
+
+9
+00:06:52.333 --> 00:06:54.200
+Edit the home page
+
+10
+00:08:15.667 --> 00:08:19.467
+Remove the rest of the template content
+
+11
+00:08:54.433 --> 00:08:56.717
+Add the remaining text
+
+12
+00:09:40.317 --> 00:09:41.983
+Save the changes
+
+13
+00:10:04.833 --> 00:10:07.117
+Create the outcome page
+
+14
+00:10:16.917 --> 00:10:20.467
+Copy the contents of the raw template
+
+15
+00:10:33.850 --> 00:10:38.317
+Create a new folder inside the public folder
+
+16
+00:10:51.600 --> 00:10:54.417
+Create a new index.html file
+
+17
+00:11:06.950 --> 00:11:10.267
+Paste the contents of the template
+
+18
+00:11:14.583 --> 00:11:15.933
+Save the file
+
+19
+00:11:24.600 --> 00:11:26.750
+Upload the chart image
+
+20
+00:11:42.333 --> 00:11:44.533
+Edit the outcome page
+
+21
+00:13:04.750 --> 00:13:07.900
+Change the source of the image
+
+22
+00:13:34.050 --> 00:13:37.883
+Remove the rest of the template content
+
+23
+00:14:07.500 --> 00:14:09.133
+Save the changes
+
+24
+00:14:20.367 --> 00:14:25.000
+Wait a few seconds for the web page
+to be published
+
+25
+00:14:33.767 --> 00:14:36.450
+Your web page is published
+
+26
+00:14:45.183 --> 00:14:46.517
+Visit the URL
+

js/player.js

-const player = new Plyr('#player', {
-  captions: { active: true, language: 'de', update: false }
-});
-
-player.source = {
-  type: 'video',
-  title: 'geology',
-  sources: [
-    {
-      src: 'videos/reactive.mp4',
-      type: 'video/mp4'
-    }
-  ],
-  tracks: [
-    {
-      kind: 'captions',
-      label: 'German',
-      srclang: 'de',
-      src: 'videos/reactive_de.vtt',
-      default: true,
-    },
-    {
-      kind: 'captions',
-      label: 'English',
-      srclang: 'en',
-      src: 'videos/reactive_en.vtt'
-    },
-  ],
-};
-
-
-let btn = document.getElementById("next");
-
-
-btn.onclick = () => {
-
-  player.source = {
-    type: 'video',
-    title: 'geology',
-    sources: [
-      {
-        src: 'videos/geology.mp4',
-        type: 'video/mp4',
-        size: 720,
-      }
-    ],
-    tracks: [
-      {
-        kind: 'captions',
-        label: 'German',
-        srclang: 'de',
-        src: 'videos/geology_de.vtt',
-        default: true,
-      },
-      {
-        kind: 'captions',
-        label: 'English',
-        srclang: 'en',
-        src: 'videos/geology_en.vtt'
-      },
-    ],
-  };
-  player.play();
-
-
-};
\ No newline at end of file