docs-#239: add info about raw transformation

docs/content/2.components/CldVideoPlayer.md

@@ -134,6 +134,21 @@ be loaded from as well as any customization of that track.
 </template>
 ```
 
+## Raw Transformations
+
+It is a common thing to add custom video transformations like fading effect in and out which can be done like following:
+
+```html
+<template>
+  <CldVideoPlayer
+    width="600"
+    height="600"
+    src="<Cloudinary URL>"
+    :transformation="{ raw_transformation: 'e_fade:2000,e_fade:-2000' }"
+  />
+</template>
+```
+
 Learn more on the [Video Player Reference](https://cloudinary.com/documentation/video_player_api_reference#text_tracks) or
 the [Subtitles and Captions guide](https://cloudinary.com/documentation/video_player_customization#subtitles_and_captions).
 

playground/app.vue

@@ -2,55 +2,53 @@
 import type {
   CloudinaryUploadWidgetError,
   CloudinaryUploadWidgetResults,
-} from '@cloudinary-util/types'
-import type { MediaType } from '../src/runtime/components/CldProductGallery.vue'
+} from "@cloudinary-util/types";
+import type { MediaType } from "../src/runtime/components/CldProductGallery.vue";
 
-const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
-console.log(url)
+const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
+console.log(url);
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: 'videos/mountain-stars' },
-})
-console.log(videoUrl)
+  options: { src: "videos/mountain-stars" },
+});
+console.log(videoUrl);
 
-const mediaAssets: { tag: string, mediaType?: MediaType }[] = [
-  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
-  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
-  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
-]
+const mediaAssets: { tag: string; mediaType?: MediaType }[] = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
 
-const buttonId = 'open-btn'
+const buttonId = "open-btn";
 
-const cldVideoRef = ref()
+const cldVideoRef = ref();
 
 const chapters = {
-  0: 'Chapter 1',
-  6: 'Chapter 2',
-  9: 'Chapter 3',
-}
+  0: "Chapter 1",
+  6: "Chapter 2",
+  9: "Chapter 3",
+};
 
 const colors = {
-  accent: '#ff0000',
-  base: '#00ff00',
-  text: '#0000ff',
-}
+  accent: "#ff0000",
+  base: "#00ff00",
+  text: "#0000ff",
+};
 
 const onResult = (results: CloudinaryUploadWidgetResults) => {
-  console.log('results', results)
-}
+  console.log("results", results);
+};
 const onError = (
   error: CloudinaryUploadWidgetError,
-  results: CloudinaryUploadWidgetResults,
+  results: CloudinaryUploadWidgetResults
 ) => {
-  console.log('error', error)
-  console.log('results', results)
-}
+  console.log("error", error);
+  console.log("results", results);
+};
 </script>
 
 <template>
-  <button :id="buttonId">
-    Select Image or Video
-  </button>
+  <button :id="buttonId">Select Image or Video</button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -83,6 +81,7 @@ const onError = (
     chapters-button
     :chapters="chapters"
     :colors="colors"
+    :transformation="{ raw_transformation: 'e_fade:2000,e_fade:-2000' }"
   />
   <CldUploadWidget
     v-slot="{ open }"
@@ -91,12 +90,7 @@ const onError = (
     :on-error="onError"
     :on-result="onResult"
   >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <CldUploadButton
     upload-preset="nuxt-cloudinary-unsigned"