add: full multi-tenancy control
This commit is contained in:
Cauê Faleiros
333
storage/framework/views/b8eaf7547e9a9ea023ea2b6a9aba1195.php
Executable file
333
storage/framework/views/b8eaf7547e9a9ea023ea2b6a9aba1195.php
Executable file
@@ -0,0 +1,333 @@
|
||||
<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag; ?>
|
||||
<?php foreach($attributes->onlyProps([
|
||||
'name' => 'images',
|
||||
'allowMultiple' => false,
|
||||
'uploadedVideos' => [],
|
||||
'width' => '210px',
|
||||
'height' => '120px'
|
||||
]) as $__key => $__value) {
|
||||
$$__key = $$__key ?? $__value;
|
||||
} ?>
|
||||
<?php $attributes = $attributes->exceptProps([
|
||||
'name' => 'images',
|
||||
'allowMultiple' => false,
|
||||
'uploadedVideos' => [],
|
||||
'width' => '210px',
|
||||
'height' => '120px'
|
||||
]); ?>
|
||||
<?php foreach (array_filter(([
|
||||
'name' => 'images',
|
||||
'allowMultiple' => false,
|
||||
'uploadedVideos' => [],
|
||||
'width' => '210px',
|
||||
'height' => '120px'
|
||||
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
|
||||
$$__key = $$__key ?? $__value;
|
||||
} ?>
|
||||
<?php $__defined_vars = get_defined_vars(); ?>
|
||||
<?php foreach ($attributes as $__key => $__value) {
|
||||
if (array_key_exists($__key, $__defined_vars)) unset($$__key);
|
||||
} ?>
|
||||
<?php unset($__defined_vars); ?>
|
||||
|
||||
<v-media-videos
|
||||
name="<?php echo e($name); ?>"
|
||||
v-bind:allow-multiple="<?php echo e($allowMultiple ? 'true' : 'false'); ?>"
|
||||
:uploaded-videos='<?php echo e(json_encode($uploadedVideos)); ?>'
|
||||
width="<?php echo e($width); ?>"
|
||||
height="<?php echo e($height); ?>"
|
||||
:errors="errors"
|
||||
<?php echo e($attributes->get('class')); ?>
|
||||
|
||||
>
|
||||
</v-media-videos>
|
||||
|
||||
<?php if (! $__env->hasRenderedOnce('a3d62c46-9431-47b2-9822-246374bc09e3')): $__env->markAsRenderedOnce('a3d62c46-9431-47b2-9822-246374bc09e3');
|
||||
$__env->startPush('scripts'); ?>
|
||||
<script
|
||||
type="text/x-template"
|
||||
id="v-media-videos-template"
|
||||
>
|
||||
<!-- Panel Content -->
|
||||
<div class="grid">
|
||||
<div class="flex gap-1">
|
||||
<!-- Upload Video Button -->
|
||||
|
||||
<label
|
||||
class="grid h-[120px] max-h-[120px] w-full max-w-[210px] cursor-pointer items-center justify-items-center rounded border border-dashed transition-all hover:border-gray-400 dark:border-gray-800 dark:mix-blend-exclusion dark:invert"
|
||||
:class="[errors['videos.files[0]'] ? 'border border-red-500' : 'border-gray-300']"
|
||||
:for="$.uid + '_videoInput'"
|
||||
v-if="allowMultiple || videos.length == 0"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="icon-image text-2xl"></span>
|
||||
|
||||
<p class="grid text-center text-sm font-semibold text-gray-600 dark:text-gray-300">
|
||||
<?php echo app('translator')->get('admin::app.components.media.videos.add-video-btn'); ?>
|
||||
|
||||
<span class="text-xs">
|
||||
<?php echo app('translator')->get('admin::app.components.media.videos.allowed-types'); ?>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
class="hidden"
|
||||
:id="$.uid + '_videoInput'"
|
||||
accept="video/*"
|
||||
:multiple="allowMultiple"
|
||||
:ref="$.uid + '_videoInput'"
|
||||
@change="add"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Uploaded Videos -->
|
||||
<draggable
|
||||
class="flex gap-1"
|
||||
ghost-class="draggable-ghost"
|
||||
v-bind="{animation: 200}"
|
||||
:list="videos"
|
||||
item-key="id"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<v-media-video-item
|
||||
:name="name"
|
||||
:index="index"
|
||||
:video="element"
|
||||
:width="width"
|
||||
:height="height"
|
||||
@onRemove="remove($event)"
|
||||
>
|
||||
</v-media-video-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script
|
||||
type="text/x-template"
|
||||
id="v-media-video-item-template"
|
||||
>
|
||||
<div class="group relative grid h-[120px] max-h-[120px] min-w-[210px] max-w-[210px] justify-items-center overflow-hidden rounded border border-dashed border-gray-300 transition-all hover:border-gray-400 dark:border-gray-800">
|
||||
<!-- Video Preview -->
|
||||
<video
|
||||
class="h-[120px] w-[210px] object-cover"
|
||||
ref="videoPreview"
|
||||
v-if="video.url.length > 0"
|
||||
>
|
||||
<source :src="video.url" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<div class="invisible absolute bottom-0 top-0 flex w-full flex-col justify-between bg-white p-3 opacity-80 transition-all group-hover:visible dark:bg-gray-900">
|
||||
<!-- Video Name -->
|
||||
<p class="break-all text-xs font-semibold text-gray-600 dark:text-gray-300"></p>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-between">
|
||||
<!-- Remove Button -->
|
||||
<span
|
||||
class="icon-delete cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
@click="remove"
|
||||
></span>
|
||||
|
||||
<!-- Play Pause Button -->
|
||||
<span
|
||||
class="cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
:class="[isPlaying ? 'icon-pause': 'icon-play']"
|
||||
@click="playPause"
|
||||
></span>
|
||||
|
||||
<!-- Edit Button -->
|
||||
<label
|
||||
class="icon-edit cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
:for="$.uid + '_videoInput_' + index"
|
||||
></label>
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
:name="name + '[' + video.id + ']'"
|
||||
v-if="! video.is_new"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
:name="name + '[]'"
|
||||
class="hidden"
|
||||
accept="video/*"
|
||||
:id="$.uid + '_videoInput_' + index"
|
||||
:ref="$.uid + '_videoInput_' + index"
|
||||
@change="edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
app.component('v-media-videos', {
|
||||
template: '#v-media-videos-template',
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: 'videos',
|
||||
},
|
||||
|
||||
allowMultiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
uploadedVideos: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
width: {
|
||||
type: String,
|
||||
default: '210px'
|
||||
},
|
||||
|
||||
height: {
|
||||
type: String,
|
||||
default: '120px'
|
||||
},
|
||||
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
videos: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.videos = this.uploadedVideos;
|
||||
},
|
||||
|
||||
methods: {
|
||||
add() {
|
||||
let videoInput = this.$refs[this.$.uid + '_videoInput'];
|
||||
|
||||
if (videoInput.files == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validFiles = Array.from(videoInput.files).every(file => file.type.includes('video/'));
|
||||
|
||||
if (! validFiles) {
|
||||
this.$emitter.emit('add-flash', {
|
||||
type: 'warning',
|
||||
message: "<?php echo app('translator')->get('admin::app.components.media.videos.not-allowed-error'); ?>"
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
videoInput.files.forEach((file, index) => {
|
||||
this.videos.push({
|
||||
id: 'video_' + this.videos.length,
|
||||
url: '',
|
||||
file: file
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
remove(video) {
|
||||
let index = this.videos.indexOf(video);
|
||||
|
||||
this.videos.splice(index, 1);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
app.component('v-media-video-item', {
|
||||
template: '#v-media-video-item-template',
|
||||
|
||||
props: ['index', 'video', 'name', 'width', 'height'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
isPlaying: false
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.video.file instanceof File) {
|
||||
this.setFile(this.video.file);
|
||||
|
||||
this.readFile(this.video.file);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit() {
|
||||
let videoInput = this.$refs[this.$.uid + '_videoInput_' + this.index];
|
||||
|
||||
if (videoInput.files == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validFiles = Array.from(videoInput.files).every(file => file.type.includes('video/'));
|
||||
|
||||
if (! validFiles) {
|
||||
this.$emitter.emit('add-flash', {
|
||||
type: 'warning',
|
||||
message: "<?php echo app('translator')->get('admin::app.components.media.videos.not-allowed-error'); ?>"
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.setFile(videoInput.files[0]);
|
||||
|
||||
this.readFile(videoInput.files[0]);
|
||||
},
|
||||
|
||||
remove() {
|
||||
this.$emit('onRemove', this.video)
|
||||
},
|
||||
|
||||
setFile(file) {
|
||||
this.video.is_new = 1;
|
||||
|
||||
const dataTransfer = new DataTransfer();
|
||||
|
||||
dataTransfer.items.add(file);
|
||||
|
||||
this.$refs[this.$.uid + '_videoInput_' + this.index].files = dataTransfer.files;
|
||||
},
|
||||
|
||||
readFile(file) {
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
this.video.url = e.target.result;
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
|
||||
playPause() {
|
||||
let videoPreview = this.$refs.videoPreview;
|
||||
|
||||
if (videoPreview.paused == true) {
|
||||
this.isPlaying = true;
|
||||
|
||||
videoPreview.play();
|
||||
} else {
|
||||
this.isPlaying = false;
|
||||
|
||||
videoPreview.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php $__env->stopPush(); endif; ?><?php /**PATH /var/www/html/packages/Webkul/Admin/src/Resources/views/components/media/videos.blade.php ENDPATH**/ ?>
|
||||
Reference in New Issue
Block a user