1 | 'use strict';
|
2 |
|
3 | var compositionApi = require('@vue/composition-api');
|
4 |
|
5 |
|
6 | var script = compositionApi.defineComponent({
|
7 | name: 'VPip',
|
8 | props: {
|
9 |
|
10 | videoOptions: {
|
11 | type: Object,
|
12 | required: false,
|
13 | default: function _default() {
|
14 | return {
|
15 | wrapper: '',
|
16 | src: '',
|
17 | poster: '',
|
18 | class: '',
|
19 | height: '100%',
|
20 | width: '100%'
|
21 | };
|
22 | }
|
23 | },
|
24 |
|
25 | buttonOptions: {
|
26 | type: Object,
|
27 | required: false,
|
28 | default: function _default() {
|
29 | return {
|
30 | wrapper: '',
|
31 | type: 'button',
|
32 | class: '',
|
33 | label: 'Toggle picture-in-picture'
|
34 | };
|
35 | }
|
36 | },
|
37 | wrapper: {
|
38 | type: String,
|
39 | default: '',
|
40 | required: false
|
41 | }
|
42 | },
|
43 |
|
44 | setup(props, _ref) {
|
45 | var emit = _ref.emit;
|
46 |
|
47 | var video = compositionApi.ref(null);
|
48 | var isPipSupported = compositionApi.ref(false);
|
49 |
|
50 | compositionApi.onMounted(function () {
|
51 | isPipSupported.value = 'pictureInPictureEnabled' in document;
|
52 | video.value.addEventListener('enterpictureinpicture', function () {
|
53 | emit('video-in-pip', true);
|
54 | });
|
55 | video.value.addEventListener('leavepictureinpicture', function () {
|
56 | emit('video-in-pip', false);
|
57 | });
|
58 | });
|
59 | compositionApi.onBeforeUnmount(function () {
|
60 | video.value.removeEventListener('enterpictureinpicture');
|
61 | video.value.removeEventListener('leavepictureinpicture');
|
62 | });
|
63 |
|
64 | var togglePip = function togglePip() {
|
65 |
|
66 |
|
67 | if (!document.pictureInPictureElement) {
|
68 | video.value.requestPictureInPicture().catch(function (error) {
|
69 |
|
70 | emit('requesting-pip-failure', error);
|
71 | });
|
72 | } else {
|
73 | document.exitPictureInPicture().catch(function (error) {
|
74 |
|
75 | emit('exiting-pip-failure', error);
|
76 | });
|
77 | }
|
78 | };
|
79 |
|
80 | return {
|
81 | video,
|
82 | isPipSupported,
|
83 | togglePip
|
84 | };
|
85 | }
|
86 |
|
87 | });
|
88 |
|
89 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
90 | if (typeof shadowMode !== 'boolean') {
|
91 | createInjectorSSR = createInjector;
|
92 | createInjector = shadowMode;
|
93 | shadowMode = false;
|
94 | }
|
95 |
|
96 | const options = typeof script === 'function' ? script.options : script;
|
97 |
|
98 | if (template && template.render) {
|
99 | options.render = template.render;
|
100 | options.staticRenderFns = template.staticRenderFns;
|
101 | options._compiled = true;
|
102 |
|
103 | if (isFunctionalTemplate) {
|
104 | options.functional = true;
|
105 | }
|
106 | }
|
107 |
|
108 | if (scopeId) {
|
109 | options._scopeId = scopeId;
|
110 | }
|
111 | let hook;
|
112 | if (moduleIdentifier) {
|
113 |
|
114 | hook = function (context) {
|
115 |
|
116 | context =
|
117 | context ||
|
118 | (this.$vnode && this.$vnode.ssrContext) ||
|
119 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext);
|
120 |
|
121 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
122 | context = __VUE_SSR_CONTEXT__;
|
123 | }
|
124 |
|
125 | if (style) {
|
126 | style.call(this, createInjectorSSR(context));
|
127 | }
|
128 |
|
129 | if (context && context._registeredComponents) {
|
130 | context._registeredComponents.add(moduleIdentifier);
|
131 | }
|
132 | };
|
133 |
|
134 |
|
135 | options._ssrRegister = hook;
|
136 | }
|
137 | else if (style) {
|
138 | hook = shadowMode
|
139 | ? function (context) {
|
140 | style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
141 | }
|
142 | : function (context) {
|
143 | style.call(this, createInjector(context));
|
144 | };
|
145 | }
|
146 | if (hook) {
|
147 | if (options.functional) {
|
148 |
|
149 | const originalRender = options.render;
|
150 | options.render = function renderWithStyleInjection(h, context) {
|
151 | hook.call(context);
|
152 | return originalRender(h, context);
|
153 | };
|
154 | }
|
155 | else {
|
156 |
|
157 | const existing = options.beforeCreate;
|
158 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
159 | }
|
160 | }
|
161 | return script;
|
162 | }
|
163 |
|
164 |
|
165 | const __vue_script__ = script;
|
166 |
|
167 |
|
168 | var __vue_render__ = function() {
|
169 | var _vm = this;
|
170 | var _h = _vm.$createElement;
|
171 | var _c = _vm._self._c || _h;
|
172 | return _c("div", { class: _vm.wrapper }, [
|
173 | _c("div", { class: _vm.videoOptions.wrapper }, [
|
174 | _c("video", {
|
175 | ref: "video",
|
176 | class: _vm.videoOptions.class,
|
177 | attrs: {
|
178 | src: _vm.videoOptions.src,
|
179 | poster: _vm.videoOptions.poster,
|
180 | height: _vm.videoOptions.height,
|
181 | width: _vm.videoOptions.width,
|
182 | controls: ""
|
183 | }
|
184 | })
|
185 | ]),
|
186 | _vm._v(" "),
|
187 | _c("div", { class: _vm.buttonOptions.wrapper }, [
|
188 | _vm.isPipSupported
|
189 | ? _c(
|
190 | "button",
|
191 | {
|
192 | class: _vm.buttonOptions.class,
|
193 | attrs: { type: _vm.buttonOptions.type },
|
194 | on: { click: _vm.togglePip }
|
195 | },
|
196 | [_vm._v("\n " + _vm._s(_vm.buttonOptions.label) + "\n ")]
|
197 | )
|
198 | : _vm._e()
|
199 | ])
|
200 | ])
|
201 | };
|
202 | var __vue_staticRenderFns__ = [];
|
203 | __vue_render__._withStripped = true;
|
204 |
|
205 |
|
206 | const __vue_inject_styles__ = undefined;
|
207 |
|
208 | const __vue_scope_id__ = undefined;
|
209 |
|
210 | const __vue_module_identifier__ = undefined;
|
211 |
|
212 | const __vue_is_functional_template__ = false;
|
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 | const __vue_component__ = normalizeComponent(
|
222 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
223 | __vue_inject_styles__,
|
224 | __vue_script__,
|
225 | __vue_scope_id__,
|
226 | __vue_is_functional_template__,
|
227 | __vue_module_identifier__,
|
228 | false,
|
229 | undefined,
|
230 | undefined,
|
231 | undefined
|
232 | );
|
233 |
|
234 | module.exports = __vue_component__;
|