8000 Feature/add ref access to video element (#126) · cloudinary/cloudinary-vue@6c747be · GitHub
[go: up one dir, main page]
Skip to content

Commit 6c747be

Browse files
patrick-tolosapatrick-tolosa
authored
Feature/add ref access to video element (#126)
* Add videoElement ref to the cldVideo component
1 parent d03225c commit 6c747be

File tree

8 files changed

+2219
-2149
lines changed

8 files changed

+2219
-2149
lines changed

‎dist/Cloudinary.common.js

Lines changed: 1092 additions & 1071 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Cloudinary.common.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Cloudinary.umd.js

Lines changed: 1092 additions & 1071 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Cloudinary.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Cloudinary.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Cloudinary.umd.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/CldVideo/CldVideo.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,14 @@ export default {
7575
getSources() {
7676
const options = this.computeURLOptions()
7777
const sources = []
78-
78+
7979
for(let type in this.sourceTypes) {
8080
const typeOptions = this.sourceTypes[type]
8181
const formatType = type === "ogv" ? "ogg" : type
8282
const srcOptions = extendOptions(options, typeOptions)
8383
8484
srcOptions.format = type
85-
85+
8686
sources.push({
8787
...typeOptions,
8888
mimeType: `video/${formatType}`,
@@ -102,6 +102,9 @@ export default {
102102
return this.cloudinary.url(this.poster?.publicId || this.publicId, this.toSnakeCase(options))
103103
}
104104
},
105+
mounted() {
106+
this.$videoElement = this.$refs.videoElement;
107+
},
105108
render(h) {
106109
if (!this.publicId) return null
107110
@@ -127,7 +130,7 @@ export default {
127130
const poster = cldPoster ? this.posterUrl : this.getPosterUrl()
128131
129132
return (
130-
<video attrs={this.$attrs} poster={poster}>
133+
<video attrs={this.$attrs} poster={poster} ref="videoElement">
131134
{ sources.map((source, index) => <source key={index} attrs={source} />)}
132135
{ this.$slots.default }
133136
</video>

‎tests/unit/Video/video.spec.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,29 @@ describe("CldVideo Component tests", () => {
6060
expect(video.attributes("aria-hidden")).toBe("true");
6161
expect(video.attributes("cloudName")).toBe(undefined);
6262
});
63+
64+
it("Exposes the video element ref", () => {
65+
const wrapper = mount({
66+
template: `
67+
<cld-video cloudName="demo" publicId="face_top" aria-hidden="true" ref="cldVideo"/>
68+
`,
69+
components: {CldVideo}
70+
});
71+
72+
const endUserComponent = wrapper.vm;
73+
// Access the cloudinary video component from within the user component
74+
const cldVideoComponent = endUserComponent.$refs.cldVideo;
75+
// Access the videoElement
76+
const videoElementFromRef = cldVideoComponent.$videoElement;
77+
78+
// Ensure that ref exposes the same video element that's found by a document selector
79+
// sort-of equiv to document.getElementByTag(...)
80+
const videoWrapperFromSelector = wrapper.find('video');
81+
// The result is a test wrapper, so we need to access the element first
82+
expect(videoWrapperFromSelector.element).toBe(videoElementFromRef);
83+
84+
['play', 'pause', 'canPlayType', 'addTextTrack'].forEach((funcName) => {
85+
expect(typeof videoElementFromRef[funcName]).toBe('function');
86+
});
87+
});
6388
});

0 commit comments

Comments
 (0)
0