Remove custom video plugin to use default Kirby video block
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
9706a67994
commit
ccc7ac4d84
7 changed files with 0 additions and 176 deletions
2
site/plugins/video/.gitignore
vendored
2
site/plugins/video/.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
||||||
node_modules/
|
|
||||||
*.log
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
name: Vidéo
|
|
||||||
icon: video
|
|
||||||
preview: video
|
|
||||||
fields:
|
|
||||||
url:
|
|
||||||
label: URL de la vidéo
|
|
||||||
type: url
|
|
||||||
help: URL YouTube, Vimeo ou lien direct vers un fichier vidéo
|
|
||||||
caption:
|
|
||||||
label: Légende
|
|
||||||
type: text
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
Kirby::plugin('index/video', [
|
|
||||||
'blueprints' => [
|
|
||||||
'blocks/video' => __DIR__ . '/blueprints/blocks/video.yml'
|
|
||||||
],
|
|
||||||
'snippets' => [
|
|
||||||
'blocks/video' => __DIR__ . '/snippets/blocks/video.php'
|
|
||||||
]
|
|
||||||
]);
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
{
|
|
||||||
"name": "video-block",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "npx -y kirbyup src/index.js --watch",
|
|
||||||
"build": "npx -y kirbyup src/index.js"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vitejs/plugin-vue": "^6.0.1",
|
|
||||||
"vite": "^7.1.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<?php
|
|
||||||
/** @var \Kirby\Cms\Block $block */
|
|
||||||
$url = $block->url()->value();
|
|
||||||
$caption = $block->caption()->value();
|
|
||||||
|
|
||||||
// Fonction pour détecter le type de vidéo
|
|
||||||
function getVideoEmbedCode($url) {
|
|
||||||
// YouTube
|
|
||||||
if (preg_match('/youtube\.com\/watch\?v=([^&]+)/', $url, $matches) ||
|
|
||||||
preg_match('/youtu\.be\/([^?]+)/', $url, $matches)) {
|
|
||||||
$videoId = $matches[1];
|
|
||||||
return '<iframe src="https://www.youtube.com/embed/' . $videoId . '" frameborder="0" allowfullscreen></iframe>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vimeo
|
|
||||||
if (preg_match('/vimeo\.com\/(\d+)/', $url, $matches)) {
|
|
||||||
$videoId = $matches[1];
|
|
||||||
return '<iframe src="https://player.vimeo.com/video/' . $videoId . '" frameborder="0" allowfullscreen></iframe>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vidéo directe (mp4, webm, etc.)
|
|
||||||
if (preg_match('/\.(mp4|webm|ogg)$/i', $url)) {
|
|
||||||
return '<video controls><source src="' . $url . '" type="video/' . pathinfo($url, PATHINFO_EXTENSION) . '"></video>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Par défaut, iframe
|
|
||||||
return '<iframe src="' . $url . '" frameborder="0" allowfullscreen></iframe>';
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<?php if ($url): ?>
|
|
||||||
<div class="container-video">
|
|
||||||
<?= getVideoEmbedCode($url) ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if ($caption): ?>
|
|
||||||
<p class="caption"><?= $caption ?></p>
|
|
||||||
<?php endif ?>
|
|
||||||
<?php endif ?>
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
<template>
|
|
||||||
<div @click="$emit('open')" class="video-preview">
|
|
||||||
<div v-if="content.url" class="video-preview__container">
|
|
||||||
<div class="video-preview__placeholder">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M8 5v14l11-7z"/>
|
|
||||||
</svg>
|
|
||||||
<p class="video-preview__url">{{ truncatedUrl }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="content.caption" class="video-preview__caption">
|
|
||||||
{{ content.caption }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div v-if="!content.url" class="video-preview__empty">
|
|
||||||
Cliquer pour ajouter une URL de vidéo
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
content: Object
|
|
||||||
});
|
|
||||||
|
|
||||||
const truncatedUrl = computed(() => {
|
|
||||||
if (!props.content?.url) return '';
|
|
||||||
const url = props.content.url;
|
|
||||||
return url.length > 50 ? url.substring(0, 50) + '...' : url;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.video-preview {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--rounded);
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--color-background);
|
|
||||||
border: 1px solid var(--color-gray-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__container {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
background: var(--color-gray-900);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__placeholder {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
color: var(--color-gray-400);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__placeholder svg {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__url {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
color: var(--color-gray-500);
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__caption {
|
|
||||||
padding: 0.75rem;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
color: var(--color-gray-600);
|
|
||||||
font-style: italic;
|
|
||||||
background: var(--color-background);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview__empty {
|
|
||||||
padding: 3rem 1rem;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--color-gray-500);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
background: var(--color-gray-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-preview:hover {
|
|
||||||
border-color: var(--color-gray-400);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import VideoBlock from "./components/VideoBlock.vue";
|
|
||||||
|
|
||||||
window.panel.plugin("index/video", {
|
|
||||||
blocks: {
|
|
||||||
video: VideoBlock
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue