Do not track by default

package.json

@@ -44,6 +44,7 @@
     "datocms-listen": "^0.1.15",
     "datocms-structured-text-generic-html-renderer": "^4.0.1",
     "datocms-structured-text-utils": "^4.0.1",
+    "hls.js": "^1.5.17",
     "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {
@@ -57,18 +58,20 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@mux/mux-player": "*",
+    "@mux/mux-player": "^2.5.0",
     "@mux/playback-core": "^0.22.1",
     "@types/hyphenate-style-name": "^1.0.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^14.18.63",
     "@vue/test-utils": "^2.4.3",
     "@vuedx/typescript-plugin-vue": "^0.7.6",
+    "doctoc": "^2.0.0",
     "esbuild": "^0.15.18",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-serializer-vue": "^2.0.2",
     "jsdom": "^19.0.0",
+    "matchmedia-polyfill": "^0.3.2",
     "np": "^9.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.79.1",
@@ -77,7 +80,6 @@
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5",
-    "vue-tsc": "^0.37.9",
-    "doctoc": "^2.0.0"
+    "vue-tsc": "^0.37.9"
   }
 }

src/components/VideoPlayer/__tests__/__snapshots__/index.test.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VideoPlayer with complete data generates a <mux-player/> 1`] = `<mux-player stream-type="on-demand" title="Title" playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY" placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A" disable-cookies="true" preload="metadata"></mux-player>`;
+exports[`VideoPlayer with complete data generates a <mux-player/> 1`] = `<mux-player stream-type="on-demand" title="Title" playback-id="ip028MAXF026dU900bKiyNDttjonw7A1dFY" placeholder="data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGAAAAP8A" disable-cookies="true" disable-tracking="true" preload="metadata"></mux-player>`;

src/components/VideoPlayer/__tests__/index.test.ts

@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils';
 
+require('matchmedia-polyfill');
+require('matchmedia-polyfill/matchMedia.addListener');
 (global as any).ResizeObserver = require('resize-observer-polyfill');
 
 import { VideoPlayer } from '../';
@@ -21,7 +23,7 @@ describe('VideoPlayer', () => {
 
     it('generates a <mux-player/>', () => {
       const wrapper = mount(VideoPlayer, {
-        propsData: { data, disableCookies: true },
+        propsData: { data },
       } as any);
 
       expect(wrapper.html()).toMatchSnapshot();

src/components/VideoPlayer/index.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, ref, type PropType } from 'vue';
 
+// import '@mux/mux-player';
+
 import { useVideoPlayer } from '../../composables/useVideoPlayer';
 
 import type {
@@ -173,6 +175,11 @@ export const VideoPlayer = defineComponent({
       required: false,
       default: () => true,
     },
+    disableTracking: {
+      type: Boolean,
+      required: false,
+      default: () => true,
+    },
     disablePictureInPicture: {
       type: Boolean,
       required: false,
@@ -371,6 +378,7 @@ export const VideoPlayer = defineComponent({
   setup: ({
     data = {},
     disableCookies = true,
+    disableTracking = true,
     preload = 'metadata',
     ...otherProps
   }) => {
@@ -381,6 +389,7 @@ export const VideoPlayer = defineComponent({
     const computedProps = {
       ...useVideoPlayer({ data }),
       disableCookies,
+      disableTracking,
       preload,
     };