Merge pull request #98 from datocms/feat/c3-create-video-player

Add `<VideoPlayer />` component

README.md

@@ -29,12 +29,14 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 [Components](https://vuejs.org/guide/essentials/component-basics.html):
 
 - [`<DatocmsImage />`](src/components/Image)
+- [`<DatocmsVideoPlayer />`](src/components/VideoPlayer)
 - [`<DatocmsStructuredText />`](src/components/StructuredText)
 
 [Composables](https://vuejs.org/guide/reusability/composables.html):
 
 - [`useQuerySubscription`](src/composables/useQuerySubscription)
 - [`useSiteSearch`](src/composables/useSiteSearch)
+- [`useVideoPlayer`](src/composables/useVideoPlayer)
 
 Helpers:
 

examples/vite-typescript-vue3/src/App.vue

@@ -1,8 +1,19 @@
 <script setup lang="ts">
-  
-import { ref, onMounted, h } from 'vue';
 
-import { Image, StructuredText } from 'vue-datocms'
+import { onMounted, ref } from 'vue';
+
+import { Image, StructuredText, VideoPlayer } from 'vue-datocms';
+
+const video = ref({
+  muxPlaybackId: 'ip028MAXF026dU900bKiyNDttjonw7A1dFY',
+  title: 'Title',
+  width: 1080,
+  height: 1920,
+  blurUpThumb:
+    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLDhAWDhYQDg0NDhUVFg0OFxUZGBYfFiEaHysjHR0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OEA4QEC8dFhwvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABkADgMBIgACEQEDEQH/xAAYAAEAAwEAAAAAAAAAAAAAAAADBAUGAf/EABwQAAICAgMAAAAAAAAAAAAAAAEDAAIEEQUGIf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIBITH/2gAMAwEAAhEDEQA/AByuKdRJlXTiXWJkfI7bkOprUJPYnAHcSzQXizNl9teCCXuB8EWckUjaf//Z',
+});
+
+const videoPlayer = ref();
 
 const blogPosts = ref<any[]>([])
 
@@ -42,15 +53,32 @@ onMounted(async () => {
 <template>
   <div>
     <h1>Last 3 posts from the blog</h1>
+
     <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;">
       <div v-for="post in blogPosts">
         <h2>{{ post.title }}</h2>
-        <Image v-if="post.coverImage" :data="post.coverImage.responsiveImage"/>
+        <Image v-if="post.coverImage" :data="post.coverImage.responsiveImage" />
         <StructuredText :data="post.excerpt" />
       </div>
     </div>
+
+    <h1>Video examples</h1>
+    <hr />
+    <VideoPlayer :data="video" class="video-player" controls :auto-play="'muted'" :disable-cookies="false"
+      @pause="console.log" @playing="console.log" />
+    <hr />
+    <VideoPlayer :data="video" :style="{ aspectRatio: '1 / 1' }" accent-color="#ffff00" :disable-cookies="true" />
+    <hr />
+    <VideoPlayer :data="video" :style="{ aspectRatio: undefined }" accent-color="#ffff00" />
+    <hr />
+    <VideoPlayer :data="video" :style="{ aspectRatio: '10 / 1', '--controls': 'none', '--media-object-fit': 'cover' }"
+      auto-play="muted" loop />
+    <hr />
+    <VideoPlayer :data="video" :style="undefined" auto-play="muted" />
+    <hr />
+    <VideoPlayer :data="{ playbackId: 'ip028MAXF026dU900bKiyNDttjonw7A1dFY' }" />
+
   </div>
 </template>
 
-<style>
-</style>
+<style></style>