Merge branch 'master' into add-video-meta-data-design

# Conflicts:
#	lecture2gether-vue/src/components/Player.vue
#	lecture2gether-vue/src/views/Room.vue

.github/workflows/k8s_tests.yml

@@ -0,0 +1,18 @@
+name: Kubernetes configuration
+
+on: [push]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: docker pull nekottyo/kustomize-kubeval
+      - name: render kustomization
+        run: |
+          docker run -i -w /working -v $(pwd):/working nekottyo/kustomize-kubeval \
+          kustomize build . >> k8s.yml
+      - name: check kubernetes configuration
+        run: |
+          docker run -i -w /working -v $(pwd):/working nekottyo/kustomize-kubeval \
+          kubeval k8s.yml --strict

Dockerfile

@@ -33,9 +33,8 @@ RUN npm run build
 FROM base as final
 COPY --from=frontend /app/src/frontend/dist/ /app/static
 # Setup configs
-#ADD docker/uwsgi.ini /etc/uwsgi/lecture2gether.ini
+VOLUME /app/config
 ADD docker/supervisor.conf /etc/supervisor/conf.d/app.conf
-RUN mkdir /app/config
 ADD docker/settings.json /app/config/settings.json
 RUN ln -sf /app/config/settings.json /app/static/settings.json
 ADD docker/nginx.conf /etc/nginx/sites-enabled/default

README.md

@@ -23,7 +23,7 @@
 Lecture2Gether makes it possible to watch online lectures with friends by pasting a link to a [Lecture2Go](https://github.com/lecture2go/portal-6.2-ce-ga6) Video, a YouTube Video or a simple mp4 link.
 The video streams are synchronized to partially restore the social aspect of campus life.
 
-![Flask CI](https://github.com/TheNerdful8/Lecture2Gether/workflows/Flask%20CI/badge.svg?branch=master)    ![Node.js CI](https://github.com/TheNerdful8/Lecture2Gether/workflows/Node.js%20CI/badge.svg)
+![Flask CI](https://github.com/TheNerdful8/Lecture2Gether/workflows/Flask%20CI/badge.svg?branch=master)    ![Node.js CI](https://github.com/TheNerdful8/Lecture2Gether/workflows/Node.js%20CI/badge.svg)    ![Kubernetes configuration](https://github.com/TheNerdful8/Lecture2Gether/workflows/Kubernetes%20configuration/badge.svg)
 
 ### Built With
 

docker/nginx.conf

@@ -1,13 +1,24 @@
 server {
     listen 8000;
     server_name default_server;
+    gzip on;
 
-    try_files $uri /index.html;
     root /app/static/;
 
+    location / {
+        try_files $uri /index.html?$args;
+        location ~* \.html$ {
+            add_header "Cache-Control" "no-cache";
+        }
+        location ~* \.(css|js|woff2) {
+            add_header "Cache-Control" "max-age=31536000";
+        }
+    }
+
     location /api {
         proxy_pass http://127.0.0.1:5000;
     }
+
     location = /socket.io/ {
         proxy_pass http://127.0.0.1:5000/socket.io/;
         proxy_http_version 1.1;

k8s/deployment.yml

@@ -7,12 +7,17 @@ spec:
   replicas: 1
   selector:
     matchLabels:
-      app: "NOT_SET"
+      app: "lecture2gether"
   template:
     metadata:
       labels:
-        app: "NOT_SET"
+        app: "lecture2gether"
     spec:
+      volumes:
+        - name: "frontend-config"
+          configMap:
+            name: "frontend"
+
       containers:
         - image: "docker.io/thenerdful8/lecture2gether"
           name: "main"
@@ -21,4 +26,11 @@ spec:
               containerPort: 8000
             - name: "metrics"
               containerPort: 5000
+          envFrom:
+            - configMapRef: 
+                name: "backend"
+          volumeMounts:
+            - name: "frontend-config"
+              mountPath: "/app/config"
+              readOnly: true
 

kustomization.yml

@@ -0,0 +1,14 @@
+---
+apiVersion: "kustomize.config.k8s.io/v1beta1"
+kind: "Kustomization"
+namePrefix: "lecture2gether-"
+commonLabels:
+  app: "lecture2gether"
+resources:
+  - "./k8s/deployment.yml"
+  - "./k8s/service.yml"
+configMapGenerator:
+  - name: "backend"
+  - name: "frontend"
+    files:
+      - "settings.json=./docker/settings.json"

lecture2gether-vue/public/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="Lecture2Gether makes it possible to watch online lectures with friends by pasting
+    a link to a Lecture2Go Video, a YouTube Video or a simple mp4 link. The video streams are synchronized to partially
+    restore the social aspect of campus life.">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="prefetch" href="<%= BASE_URL %>settings.json">
     <title>Lecture2Gether</title>

lecture2gether-vue/src/components/Player.vue

@@ -64,9 +64,11 @@ export default class L2gPlayer extends Vue {
     }
 
     get playerOptions() {
-        const sources = [];
+        let source;
+        let playbackRates;
         try {
-            sources.push(this.getSourceFromURL(this.url));
+            source = this.getSourceFromURL(this.url);
+            playbackRates = this.getPlaybackRatesFromSource(source.type);
         } catch (e) {
             console.error(e);
             // Show error page
@@ -77,8 +79,8 @@ export default class L2gPlayer extends Vue {
             muted: false,
             language: 'en',
             fluid: true,
-            playbackRates: [0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
-            sources,
+            playbackRates,
+            sources: [source],
             techOrder: ['youtube', 'html5'],
             youtube: {
                 ytControls: 0,
@@ -91,6 +93,15 @@ export default class L2gPlayer extends Vue {
         return this.$refs.videoPlayer.player;
     }
 
+    getPlaybackRatesFromSource(src: string): Number[] {
+        if (src === 'video/youtube') {
+            // YouTube does not support player speed above 2x
+            return [0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+        } else {
+            return [0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5];
+        }
+    }
+
     getSourceFromURL(url: string): {type: string; src: string} {
         // shared media logic in src/mediaURLs.ts checkURL
         const res = checkURL(url);
@@ -262,4 +273,7 @@ export default class L2gPlayer extends Vue {
 .video-js .vjs-duration {
     display: block;
 }
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+    max-height: 16em;
+}
 </style>

lecture2gether-vue/src/components/Toolbar.vue

@@ -25,7 +25,8 @@
                     </v-btn>
                     <v-tooltip bottom v-model="showingTooltip">
                         <template v-slot:activator="_">
-                            <v-btn @click="saveUrlClipboard()" class="canCopy share ml-4" color="primary" depressed outlined large type="button">
+                            <v-btn @click="saveUrlClipboard()" class="canCopy share ml-4" color="primary" depressed
+                                   outlined large type="button" aria-label="Copy share URL">
                                 <v-icon>mdi-share</v-icon>
                             </v-btn>
                         </template>

lecture2gether-vue/src/plugins/router/routes.ts

@@ -1,6 +1,6 @@
 import { RouteConfig } from 'vue-router';
 import Home from '@/views/Home.vue';
-import Player from '@/views/Room.vue';
+import Room from '@/views/Room.vue';
 
 export default [
     {
@@ -10,8 +10,8 @@ export default [
     },
     {
         path: '/l/:roomId',
-        name: 'player',
-        component: Player,
+        name: 'room',
+        component: Room,
     },
     {
         path: '/sync/debug',

lecture2gether-vue/src/plugins/vuetify.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Vuetify from 'vuetify';
+import Vuetify from 'vuetify/lib';
 import 'vuetify/dist/vuetify.min.css';
 
 Vue.use(Vuetify);

lecture2gether-vue/src/views/Home.vue

@@ -22,7 +22,7 @@ export default class L2gHome extends Vue {
     async onConnectedChanged() {
         await this.$store.dispatch('newRoom');
         await this.$router.push({
-            name: 'player',
+            name: 'room',
             params: {
                 roomId: this.$store.state.rooms.roomId,
             },

lecture2gether-vue/src/views/Room.vue

@@ -3,7 +3,7 @@
         <v-row>
             <v-spacer></v-spacer>
             <PasswordDialog v-if="this.$store.getters.authRequired" class="password-dialog"></PasswordDialog>
-            <l2g-player v-if="!this.$store.getters.authRequired && this.$store.state.player.videoUrl" class="l2g-player"></l2g-player>
+            <player v-if="!this.$store.getters.authRequired && this.$store.state.player.videoUrl" class="l2g-player"></player>
             <v-spacer></v-spacer>
         </v-row>
         <v-overlay :value="!roomExists" light>
@@ -21,15 +21,15 @@
 // @ is an alias to /src
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import L2gPlayer from '@/components/Player.vue';
+import Player from '@/components/Player.vue';
 import { Watch } from 'vue-property-decorator';
 import { AuthState } from '@/plugins/store/player';
 import PasswordDialog from '@/components/PasswordDialog.vue';
 
 @Component({
-    components: { PasswordDialog, L2gPlayer },
+    components: { PasswordDialog, Player },
 })
-export default class L2gPlayerView extends Vue {
+export default class Room extends Vue {
     roomExists = true;
 
     @Watch('$route.params.roomId')

lecture2gether-vue/tsconfig.json

@@ -12,7 +12,8 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "vuetify"
     ],
     "paths": {
       "@/*": [