field video on paragraphe source
This commit is contained in:
211
src/components/editable/VideoEditable.vue
Normal file
211
src/components/editable/VideoEditable.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<script>
|
||||
|
||||
import JSONAPI from '@api/json-axios'
|
||||
import REST from '@api/rest-axios'
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@stores/user'
|
||||
|
||||
import ContentEditable from '@components/editable/ContentEditable.vue';
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiTrashCanOutline } from '@mdi/js';
|
||||
import { mdiMovieOpenPlusOutline } from '@mdi/js';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
can_update: Boolean,
|
||||
video: Object,
|
||||
data: Object
|
||||
},
|
||||
emits: ['updated'],
|
||||
data(){
|
||||
return {
|
||||
mdiTrashCanOutline_path: mdiTrashCanOutline,
|
||||
mdiMovieOpenPlusOutline_path: mdiMovieOpenPlusOutline,
|
||||
plyr_options: {
|
||||
controls: ['play', 'progress', 'current-time', 'mute', 'volume']
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(UserStore,['csrf_token']),
|
||||
},
|
||||
created () {
|
||||
console.log('VideoEditable created');
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore, ['reloadConcernements']),
|
||||
// addImage(e){
|
||||
// console.log('addImage', this.$refs);
|
||||
// this.$refs.image_input.click();
|
||||
// },
|
||||
onSaveVideoLink(e){
|
||||
console.log('onSaveVideoLink', e);
|
||||
let url = this.$refs.video_link_input.innerText;
|
||||
console.log('onSaveVideoLink url', url);
|
||||
this.save(url);
|
||||
},
|
||||
save(content){
|
||||
// console.log('save csrf_token', this.csrf_token);
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
[this.data.field.field_name]: [{[this.data.field.value]: content}]
|
||||
};
|
||||
if (this.data.entitytype === 'node') {
|
||||
params.nid = [{"value":this.data.id}];
|
||||
} else {
|
||||
params.id = [{"value":this.data.id}];
|
||||
}
|
||||
// we need additional values for image alt for example
|
||||
// console.log('additional_values', this.data.field.additional_values);
|
||||
if (this.data.field.additional_values) {
|
||||
for (const key in this.data.field.additional_values) {
|
||||
if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
|
||||
params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const configs = {
|
||||
headers: {'X-CSRF-Token': this.csrf_token}
|
||||
};
|
||||
|
||||
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
||||
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
||||
.then(({ data }) => {
|
||||
console.log('user REST post node data', data)
|
||||
// TODO if success update the data in pinia
|
||||
// this.reloadConcernements();
|
||||
this.$emit('updated');
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
},
|
||||
onDeleteVideo(e){
|
||||
console.log('onDeleteVideo', e);
|
||||
|
||||
const params = {
|
||||
type: this.data.bundle,
|
||||
// nid: [{"value":this.data.id}],
|
||||
[this.data.field.field_name]: {[this.data.field.value]: null}
|
||||
};
|
||||
if (this.data.entitytype === 'node') {
|
||||
params.nid = [{"value":this.data.id}];
|
||||
} else {
|
||||
params.id = [{"value":this.data.id}];
|
||||
}
|
||||
|
||||
const configs = {
|
||||
headers: {'X-CSRF-Token': this.csrf_token}
|
||||
};
|
||||
|
||||
let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
|
||||
REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
|
||||
.then(({ data }) => {
|
||||
console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
|
||||
this.$emit('updated');
|
||||
})
|
||||
.catch(error => {
|
||||
console.warn(`Issue with patch node ${this.data.bundle} ${this.data.field}`, error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
|
||||
// 405 JSONAPI operation not allowed, don't know why
|
||||
|
||||
// const configs = {
|
||||
// headers: {
|
||||
// 'X-CSRF-Token': this.csrf_token,
|
||||
// 'Content-Type': 'application/octet-stream',
|
||||
// 'Content-Disposition': `file; filename=""`,
|
||||
// },
|
||||
// };
|
||||
|
||||
// JSONAPI.delete(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, {}, configs)
|
||||
// .then(({ data : { data } }) => {
|
||||
// console.log('jsonapi delete image', data)
|
||||
// this.$emit('updated');
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.warn('Issue with jsonapi post image', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
// console.log('save csrf_token', this.csrf_token);
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SvgIcon,
|
||||
ContentEditable
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editable-video">
|
||||
<!-- with video -->
|
||||
<template v-if="video">
|
||||
<!-- v-for="(video,v) in source.videos"
|
||||
:key="v" -->
|
||||
<vue-plyr
|
||||
>
|
||||
<div class="plyr__video-embed">
|
||||
<!-- TODO fix vimeo embed url -->
|
||||
<iframe
|
||||
:src="video.url"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</vue-plyr>
|
||||
<div v-if="can_update" @click="onDeleteVideo" class="delete-btn">
|
||||
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- with out video -->
|
||||
<template v-else-if="can_update">
|
||||
<!-- <input ref="videolink_input" type="text" @input="onInput"> -->
|
||||
<div class="editable-wrapper">
|
||||
<div
|
||||
ref="video_link_input"
|
||||
:contenteditable="can_update"
|
||||
:spellcheck="spellcheck"
|
||||
data-placeholder="coller un lien de video" />
|
||||
<!-- @focusout="onVideoInputFocusOut" -->
|
||||
<svg-icon class="video-btn" type="mdi" :path="mdiMovieOpenPlusOutline_path" @click="onSaveVideoLink"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editable-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
[contenteditable] {
|
||||
flex: auto 1 0;
|
||||
/* display: inline-block; */
|
||||
/* padding:12px; */
|
||||
/* background:red; */
|
||||
/* min-height: 1em; */
|
||||
}
|
||||
[data-placeholder]:empty:before{
|
||||
content: attr(data-placeholder);
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
svg{
|
||||
/* display: inline-block; */
|
||||
flex: auto 0 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user