Skip to content

Commit

Permalink
mp4 videos
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastihilger
bastihilger committed Apr 21, 2022
1 parent c59dada commit ca22266
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 27 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}
],
"require": {
"php": "^8.0|^7.3"
"php": "^8.1|^8.0|^7.3"
},
"require-dev": {
"laravel/nova": "^3.0",
Expand Down
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

55 changes: 51 additions & 4 deletions resources/js/components/content-blocks/GalleryContentBlock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,33 @@
:key="slide.fileInputKey"
type="file"
@change="changeFile(slideIndex, $event.target.files)"
accept="image/*"
accept="image/*,video/*"
class="opacity-0 w-full h-full absolute top-0 left-0"
/>
<span v-text="__('select file')"></span>
</label>


<img v-if="slide.src" :src="slide.src" class="h-16 w-auto" />
<div
v-if="slide.src"
class="h-16 w-auto"
>
<div
v-if="isVideo(slide.src)"
class="
h-16 w-16
flex items-center justify-center
border border-primary text-primary
"
>
<span>Video</span>
</div>

<img
v-else :src="slide.src"
class="h-16 w-auto"
/>
</div>

<div
class="ml-8 h-16 flex items-center"
v-if="!slide.src"
Expand All @@ -111,7 +129,28 @@
v-text="__('no file selected')"
>
</span>
<img v-if="slide.preview" :src="slide.preview" class="h-16 w-auto" />

<div
v-if="slide.preview"
class="h-16 w-auto"
>
<div
v-if="isVideo(slide.name)"
class="
h-16 w-16
flex items-center justify-center
border border-primary text-primary
"
>
<span>Video</span>
</div>

<img
v-else :src="slide.preview"
class="h-16 w-auto"
/>
</div>

</div>

<div
Expand Down Expand Up @@ -479,6 +518,7 @@ export default {
credits: '',
preview: '',
file: '',
name: '',
src: '',
link: '',
linkTarget: '',
Expand Down Expand Up @@ -543,6 +583,7 @@ export default {
if (files.length) {
this.slides[index].src = '';
this.slides[index].file = files[0];
this.slides[index].name = this.slides[index].file.name;
this.slides[index].preview = URL.createObjectURL(this.slides[index].file);
}
},
Expand Down Expand Up @@ -615,6 +656,12 @@ export default {
this.$el.remove();
},
isVideo(filename) {
var ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
console.log(ext);
return (ext == 'mp4' || ext == 'mov');
},
__(str) {
return str;
}
Expand Down
82 changes: 61 additions & 21 deletions src/TiptapContentBlocks.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<?php

namespace Manogi\Tiptap;

use Illuminate\Support\Str;
Expand All @@ -11,20 +10,20 @@ public function parse($content)
$content = preg_replace_callback(
'/<video-content-block embedcode="(.*?)" caption="(.*?)" credits="(.*?)" ratio="(.*?)" key="(.*?)"><\/video-content-block>/is',
function ($matches) {
return '<div class="ttcp-video-wrapper" ratio="'.$matches[4].'">
return '<div class="ttcp-video-wrapper" ratio="' . $matches[4] . '">
<div class="ttcp-video-inner">
<div class="ttcp-iframe-wrapper">'
.html_entity_decode($matches[1])
.'</div>
. html_entity_decode($matches[1])
. '</div>
<div class="ttcp-below-video">
<div class="ttcp-caption">'.($matches[2] ?: '').'</div>
<div class="ttcp-credits">'.($matches[3] ?: '').'</div>
<div class="ttcp-caption">' . ($matches[2] ?: '') . '</div>
<div class="ttcp-credits">' . ($matches[3] ?: '') . '</div>
</div>
</div>
</div>';
},
$content
);
);

$content = preg_replace_callback(
'/<gallery-content-block slides="(.*?)" slidecount="(.*?)" maxcolumns="(.*?)" mode="(.*?)" formatmode="(.*?)" format="(.*?)" key="(.*?)" imagedisk="(.*?)" imagepath="(.*?)"><\/gallery-content-block>/is',
Expand All @@ -36,7 +35,7 @@ function ($matches) {
$ratio = $matches[6];

if ($mode == 'grid') {
$html = '<div class="ttcp-grid-wrapper"><div class="ttcp-grid-inner"><div class="ttcp-grid-stage ttcp-grid-cols-'.$maxcolumns.'">';
$html = '<div class="ttcp-grid-wrapper"><div class="ttcp-grid-inner"><div class="ttcp-grid-stage ttcp-grid-cols-' . $maxcolumns . '">';

foreach ($slides as $slide) {
$embedCode = '';
Expand All @@ -49,12 +48,12 @@ function ($matches) {
$text = $slide->text;
}

$html .= '<div class="ttcp-grid-slide ttcp-grid-formatmode-'.$formatmode.'" ratio="'.$ratio.'">';
$html .= '<div class="ttcp-grid-slide ttcp-grid-formatmode-' . $formatmode . '" ratio="' . $ratio . '">';
$html .= '<div class="ttcp-grid-image-wrapper">';
if (@$slide->link && ! $embedCode) {
$html .= '<a href="'.$slide->link.'"';
if (@$slide->link && !$embedCode) {
$html .= '<a href="' . $slide->link . '"';
if (@$slide->linkTarget) {
$html .= ' target="'.$slide->linkTarget.'" ';
$html .= ' target="' . $slide->linkTarget . '" ';
}
$html .= '>';
}
Expand All @@ -64,31 +63,51 @@ function ($matches) {
} elseif ($text) {
$html .= $text;
} else {
$html .= '<img class="ttcp-grid-image" src="'.$slide->src.'" />';
if ($this->isVideo($slide->src)) {
$html .= '<video
autoplay muted loop playsinline
class="ttcp-grid-image"
>
<source src="' . $slide->src . '" type="video/mp4">
</video>';
} else {
$html .= '<img class="ttcp-grid-image" src="' . $slide->src . '" />';
}
}

if (@$slide->link && ! $embedCode) {
if (@$slide->link && !$embedCode) {
$html .= '</a>';
}
$html .= '</div>';
$html .= '<div class="ttcp-grid-subtext">';
$html .= '<div class="ttcp-grid-caption">'.$slide->caption.'</div>';
$html .= '<div class="ttcp-grid-credits">'.$slide->credits.'</div>';
$html .= '<div class="ttcp-grid-caption">' . $slide->caption . '</div>';
$html .= '<div class="ttcp-grid-credits">' . $slide->credits . '</div>';
$html .= '</div>';
$html .= '</div>';
}

$html .= '</div></div></div>';
} elseif ($mode == 'slideshow') {
$html = '<div class="ttcp-slideshow-wrapper"><div class="ttcp-slideshow-inner"><div id="swiper_'.Str::random(12).'" class="swiper"><div class="swiper-wrapper">';
$html = '<div class="ttcp-slideshow-wrapper"><div class="ttcp-slideshow-inner"><div id="swiper_' . Str::random(12) . '" class="swiper"><div class="swiper-wrapper">';

foreach ($slides as $slide) {
$html .= '<div class="ttcp-slideshow-slide swiper-slide">';
$html .= '<div class="ttcp-slideshow-image-wrapper"><div class="ttcp-slideshow-image-inner">';
$html .= '<img class="ttcp-slideshow-image" src="'.$slide->src.'" />';

if ($this->isVideo($slide->src)) {
$html .= '<video
autoplay muted loop playsinline
class="ttcp-slideshow-image"
>
<source src="' . $slide->src . '" type="video/mp4">
</video>';
} else {
$html .= '<img class="ttcp-slideshow-image" src="' . $slide->src . '" />';
}

$html .= '<div class="ttcp-slideshow-subtext">';
$html .= '<div class="ttcp-slideshow-caption">'.$slide->caption.'</div>';
$html .= '<div class="ttcp-slideshow-credits">'.$slide->credits.'</div>';
$html .= '<div class="ttcp-slideshow-caption">' . $slide->caption . '</div>';
$html .= '<div class="ttcp-slideshow-credits">' . $slide->credits . '</div>';
$html .= '</div>';

$html .= '</div></div>';
Expand All @@ -110,8 +129,29 @@ function ($matches) {
return $html;
},
$content
);
);

return $content;
}

protected function isVideo($filename)
{
$extension = $this->getExtension($filename);
$good = ['mp4', 'mov'];
if (in_array($extension, $good)) {
return true;
}

return false;
}

protected function getExtension($filename)
{
$extension = '';
if (strrpos($filename, '.')) {
$extension = strtolower(substr($filename, strrpos($filename, '.') + 1));
}

return $extension;
}
}

0 comments on commit ca22266

Please sign in to comment.