Merge pull request #73 from TheNerdful8/add-video-meta-data-design

Add design for video meta data
TheNerdful8 · Jul 27, 2020 · f063e01 · f063e01
2 parents 854ab06 + 2e3f8f1
commit f063e01
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 20 deletions.
diff --git a/lecture2gether-vue/src/components/Player.vue b/lecture2gether-vue/src/components/Player.vue
@@ -78,7 +78,7 @@ export default class L2gPlayer extends Vue {
             // videojs options
             muted: false,
             language: 'en',
-            width: '750px',
+            fluid: true,
             playbackRates,
             sources: [source],
             techOrder: ['youtube', 'html5'],

diff --git a/lecture2gether-vue/src/components/Toolbar.vue b/lecture2gether-vue/src/components/Toolbar.vue
@@ -140,7 +140,7 @@ export default class Toolbar extends Vue {
         width: 100%;
         max-width: 100%;
         transition: all 0.8s ease;
-        margin-bottom: 128px;
+        margin-bottom: 32px;
     }
 
     .searchbar-cover-collapsed {

diff --git a/lecture2gether-vue/src/components/VideoMetaData.vue b/lecture2gether-vue/src/components/VideoMetaData.vue
@@ -1,15 +1,35 @@
 <template>
-    <div class="video-meta-data" style="visibility: hidden;">
-        <div class="title">
+    <div class="video-meta-data pa-6">
+        <div class="video-title display-1"
+             v-if="videoMetaData.title !== null"
+        >
             {{ videoMetaData.title }}
+            <v-btn icon
+                   :href="videoMetaData.url"
+                   target="_blank"
+                   v-if="videoMetaData.url !== null"
+            >
+                <v-icon>mdi-open-in-new</v-icon>
+            </v-btn>
         </div>
-        <a class="creator" :href="videoMetaData.creatorLink">
-            {{ videoMetaData.creator }}
-        </a>
-        <div class="date">
-            {{ videoDate }}
+        <div>
+            <a class="creator body-1 meta-data-link"
+               :href="videoMetaData.creatorLink"
+               v-if="videoMetaData.creator !== null"
+            >
+                {{ videoMetaData.creator }}
+            </a>
+            <div class="date body-1"
+                 v-if="videoMetaData.date !== null"
+            >
+                {{ videoDate }}
+            </div>
         </div>
-        <a class="license" :href="videoMetaData.licenseLink">
+        <v-spacer></v-spacer>
+        <a class="license body-1 meta-data-link"
+           :href="videoMetaData.licenseLink"
+           v-if="videoMetaData.license !== null"
+        >
             License: {{ videoMetaData.license }}
         </a>
     </div>
@@ -34,4 +54,26 @@ export default class VideoMetaData extends Vue {
 </script>
 
 <style scoped lang="scss">
+    .video-meta-data {
+        text-align: left;
+        display: grid;
+        grid-gap: 1em;
+        grid-template-columns: auto 1fr auto;
+    }
+
+    .video-title {
+        grid-column: span 3;
+    }
+
+    .meta-data-link {
+        color: #222222 !important;
+    }
+
+    .meta-data-link:link {
+        text-decoration: none;
+    }
+
+    .meta-data-link:hover {
+        text-decoration: underline;
+    }
 </style>
diff --git a/lecture2gether-vue/src/views/Room.vue b/lecture2gether-vue/src/views/Room.vue
@@ -1,7 +1,11 @@
 <template>
     <div>
-        <PasswordDialog v-if="this.$store.getters.authRequired" class="password-dialog"></PasswordDialog>
-        <player v-if="!this.$store.getters.authRequired && this.$store.state.player.videoUrl" class="l2g-player"></player>
+        <v-row>
+            <v-spacer></v-spacer>
+            <PasswordDialog v-if="this.$store.getters.authRequired" class="password-dialog"></PasswordDialog>
+            <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>
             <v-card class="room-card pa-12">
                 <h2 class="display-1 heading ">Room does not exist (anymore)!</h2>
@@ -69,14 +73,7 @@ export default class Room extends Vue {
         width: 100%!important;
     }
     .l2g-player {
-        margin: auto;
-        //hacky way to force centered video.
-        //this size has to be the same as the video
-        //width in src/components/Player.vue
+        width: 100vw;
         max-width: 750px;
     }
-
-    .password-dialog {
-        margin: auto;
-    }
 </style>