@mindedge/vuetify-player 0.2.0 → 0.3.0

package/src/components/VuetifyPlayer.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-row>
-            <v-col :cols="!playlistmenu || playlist.length <= 1 ? 12 : 8">
+            <v-col :cols="playerCols">
                 <YoutubePlayer
                     ref="youtubePlayer"
                     v-if="parseSourceType(current.src.sources) === 'youtube'"
@@ -40,11 +40,16 @@
                     @click:fullscreen="onFullscreen"
                     @click:pictureinpicture="onPictureInPicture"
                     @click:remoteplayback="onRemoteplayback"
+                    @click:captions-expand="onClickCaptionsExpand"
+                    @click:captions-paragraph="onClickCaptionsParagraph"
                 ></Html5Player>
             </v-col>
 
             <!-- Playlist stuff -->
-            <v-col v-if="playlistmenu && playlist.length > 1" cols="4">
+            <v-col
+                v-if="playlistmenu && playlist.length > 1"
+                :cols="playlistCols"
+            >
                 <PlaylistMenu
                     v-model="sourceIndex"
                     :language="language"
@@ -173,10 +178,41 @@ export default {
 
             return attrs
         },
+        playlistCols() {
+            // Captions collapsed, playlist will appear on the right
+            if (
+                !this.captionsExpanded &&
+                this.playlistmenu &&
+                this.playlist.length > 1
+            ) {
+                return 4
+            } else if (
+                this.captionsExpanded &&
+                this.playlistmenu &&
+                this.playlist.length > 1
+            ) {
+                // Captions expanded, playlist will appear as a new row on the bottom of everything
+                return 12
+            } else {
+                return 0
+            }
+        },
+        playerCols() {
+            if (
+                this.captionsExpanded ||
+                !this.playlistmenu ||
+                this.playlist.length <= 1
+            ) {
+                return 12
+            } else {
+                return 8
+            }
+        },
     },
     data() {
         return {
             sourceIndex: 0,
+            captionsExpanded: false,
         }
     },
     methods: {
@@ -236,6 +272,13 @@ export default {
                 this.$emit('click:fullscreen', false)
             }
         },
+        onClickCaptionsExpand(expanded) {
+            this.captionsExpanded = expanded
+            this.$emit('click:captions-expand', expanded)
+        },
+        onClickCaptionsParagraph(isParagraph) {
+            this.$emit('click:captions-paragraph', isParagraph)
+        },
         onPlaylistSelect(index) {
             this.sourceIndex = parseInt(index)
             this.player.load()

package/src/i18n/en-US.js

@@ -25,4 +25,10 @@ export default {
         pause: 'Click to pause',
         no_support: "Sorry, your browser doesn't support embedded videos.",
     },
+    captions: {
+        expand: 'Expand',
+        collapse: 'Collapse',
+        view_as_paragraph: 'View as paragraph',
+        view_as_captions: 'View as captions',
+    },
 }

package/src/i18n/es-ES.js

@@ -0,0 +1,34 @@
+export default {
+    locales: {
+        'en-US': 'inglés',
+        'sv-SE': 'sueco',
+    },
+    playlist: {
+        up_next: 'A continuación',
+        default_name: 'Medios',
+        previous: 'Reproducir elemento anterior en la lista de reproducción',
+        next: 'Reproducir el siguiente elemento en la lista de reproducción',
+    },
+    player: {
+        playback_speed: 'Velocidad de reproducción',
+        playback_decrease: 'Disminuir la velocidad de reproducción',
+        playback_increase: 'Aumentar la velocidad de reproducción',
+        toggle_settings: 'Alternar configuración',
+        download: 'Descargar',
+        toggle_remote_playback: 'Alternar reproducción remota',
+        toggle_picture_in_picture: 'Alternar Imagen en imagen',
+        toggle_fullscreen: 'Alternar pantalla completa',
+        toggle_cc: 'Alternar subtítulos',
+        volume_slider: 'Control deslizante de volumen',
+        rewind_10: 'Rebobinar 10 segundos',
+        play: 'Haz clic para reproducir',
+        pause: 'Haga clic para pausar',
+        no_support: 'Lo sentimos, su navegador no admite vídeos incrustados. ',
+    },
+    captions: {
+        expand: 'Expandir',
+        collapse: 'Colapsar',
+        view_as_paragraph: 'Ver como párrafo',
+        view_as_captions: 'Ver como subtítulos',
+    },
+}

package/src/i18n/index.js

@@ -1,7 +1,9 @@
 import enUS from './en-US'
+import esES from './es-ES'
 import svSE from './sv-SE'
 
 export default {
     'en-US': enUS,
     'sv-SE': svSE,
+    'es-ES': esES,
 }

package/src/i18n/sv-SE.js

@@ -25,4 +25,10 @@ export default {
         pause: 'Klicka för att pausa',
         no_support: 'Tyvärr, din webbläsare stöder inte inbäddade videor.',
     },
+    captions: {
+        expand: 'Bygga ut',
+        collapse: 'Kollaps',
+        view_as_paragraph: 'Visa som stycke',
+        view_as_captions: 'Visa som bildtexter',
+    },
 }