From 7caaa9f7c3ac5aa2ddbb7fe009737096e8e4ee8f Mon Sep 17 00:00:00 2001 From: trendschau Date: Wed, 16 Oct 2024 12:40:29 +0200 Subject: [PATCH] V2.10.0 introduse native videos to visual editor --- composer.lock | 46 +- system/typemill/Extensions/MediaExtension.php | 114 ++ system/typemill/author/css/custom.css | 2 +- system/typemill/author/css/output.css | 1530 +++++++++-------- .../typemill/author/js/vue-blox-components.js | 523 +++++- system/typemill/author/js/vue-blox-config.js | 35 +- system/typemill/author/js/vue-blox.js | 9 +- system/typemill/author/js/vue-medialib.js | 4 +- system/typemill/author/partials/symbols.twig | 4 + system/typemill/settings/system.yaml | 1 + system/typemill/system.php | 4 + themes/cyanine/css/style.css | 2 +- 12 files changed, 1369 insertions(+), 905 deletions(-) create mode 100644 system/typemill/Extensions/MediaExtension.php diff --git a/composer.lock b/composer.lock index da34fb5..215091d 100644 --- a/composer.lock +++ b/composer.lock @@ -116,12 +116,12 @@ "source": { "type": "git", "url": "https://github.com/erusev/parsedown-extra.git", - "reference": "fd33d68349630d18d56367712a64445a6e0bc83e" + "reference": "cd57cf183be7b56e90498091c0a7955ad4df223c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/erusev/parsedown-extra/zipball/fd33d68349630d18d56367712a64445a6e0bc83e", - "reference": "fd33d68349630d18d56367712a64445a6e0bc83e", + "url": "https://api.github.com/repos/erusev/parsedown-extra/zipball/cd57cf183be7b56e90498091c0a7955ad4df223c", + "reference": "cd57cf183be7b56e90498091c0a7955ad4df223c", "shasum": "" }, "require": { @@ -163,7 +163,7 @@ "issues": "https://github.com/erusev/parsedown-extra/issues", "source": "https://github.com/erusev/parsedown-extra/tree/master" }, - "time": "2021-10-25T08:46:29+00:00" + "time": "2024-09-29T09:07:37+00:00" }, { "name": "fig/http-message-util", @@ -406,16 +406,16 @@ }, { "name": "laravel/serializable-closure", - "version": "v1.3.4", + "version": "v1.3.5", "source": { "type": "git", "url": "https://github.com/laravel/serializable-closure.git", - "reference": "61b87392d986dc49ad5ef64e75b1ff5fee24ef81" + "reference": "1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/61b87392d986dc49ad5ef64e75b1ff5fee24ef81", - "reference": "61b87392d986dc49ad5ef64e75b1ff5fee24ef81", + "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c", + "reference": "1dc4a3dbfa2b7628a3114e43e32120cce7cdda9c", "shasum": "" }, "require": { @@ -463,7 +463,7 @@ "issues": "https://github.com/laravel/serializable-closure/issues", "source": "https://github.com/laravel/serializable-closure" }, - "time": "2024-08-02T07:48:17+00:00" + "time": "2024-09-23T13:33:08+00:00" }, { "name": "nikic/fast-route", @@ -1452,16 +1452,16 @@ }, { "name": "slim/twig-view", - "version": "3.4.0", + "version": "3.4.1", "source": { "type": "git", "url": "https://github.com/slimphp/Twig-View.git", - "reference": "1b351536b9a07ed90a3563ee9d71a987c5d74610" + "reference": "b4268d87d0e327feba5f88d32031e9123655b909" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/slimphp/Twig-View/zipball/1b351536b9a07ed90a3563ee9d71a987c5d74610", - "reference": "1b351536b9a07ed90a3563ee9d71a987c5d74610", + "url": "https://api.github.com/repos/slimphp/Twig-View/zipball/b4268d87d0e327feba5f88d32031e9123655b909", + "reference": "b4268d87d0e327feba5f88d32031e9123655b909", "shasum": "" }, "require": { @@ -1469,12 +1469,12 @@ "psr/http-message": "^1.1 || ^2.0", "slim/slim": "^4.12", "symfony/polyfill-php81": "^1.29", - "twig/twig": "^3.8" + "twig/twig": "^3.11" }, "require-dev": { "phpspec/prophecy-phpunit": "^2.0", "phpstan/phpstan": "^1.10.59", - "phpunit/phpunit": "^9.6", + "phpunit/phpunit": "^9.6 || ^10", "psr/http-factory": "^1.0", "squizlabs/php_codesniffer": "^3.9" }, @@ -1511,9 +1511,9 @@ ], "support": { "issues": "https://github.com/slimphp/Twig-View/issues", - "source": "https://github.com/slimphp/Twig-View/tree/3.4.0" + "source": "https://github.com/slimphp/Twig-View/tree/3.4.1" }, - "time": "2024-04-28T20:36:39+00:00" + "time": "2024-09-26T05:42:02+00:00" }, { "name": "symfony/deprecation-contracts", @@ -2126,16 +2126,16 @@ }, { "name": "symfony/yaml", - "version": "v5.4.43", + "version": "v5.4.44", "source": { "type": "git", "url": "https://github.com/symfony/yaml.git", - "reference": "62f96e1cfd4cf518882a36bfedcf1fe4093c1299" + "reference": "7025b964f123bbf1896d7563db6ec7f1f63e918a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/yaml/zipball/62f96e1cfd4cf518882a36bfedcf1fe4093c1299", - "reference": "62f96e1cfd4cf518882a36bfedcf1fe4093c1299", + "url": "https://api.github.com/repos/symfony/yaml/zipball/7025b964f123bbf1896d7563db6ec7f1f63e918a", + "reference": "7025b964f123bbf1896d7563db6ec7f1f63e918a", "shasum": "" }, "require": { @@ -2181,7 +2181,7 @@ "description": "Loads and dumps YAML files", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/yaml/tree/v5.4.43" + "source": "https://github.com/symfony/yaml/tree/v5.4.44" }, "funding": [ { @@ -2197,7 +2197,7 @@ "type": "tidelift" } ], - "time": "2024-08-11T17:40:32+00:00" + "time": "2024-09-16T14:36:56+00:00" }, { "name": "twig/twig", diff --git a/system/typemill/Extensions/MediaExtension.php b/system/typemill/Extensions/MediaExtension.php new file mode 100644 index 0000000..1f1f6f1 --- /dev/null +++ b/system/typemill/Extensions/MediaExtension.php @@ -0,0 +1,114 @@ +rootpath = $rootpath; + $this->baseurl = $baseurl; + } + + public static function getSubscribedEvents() + { + return [ + 'onShortcodeFound' => 'onShortcodeFound', + ]; + } + + public function onShortcodeFound($shortcode) + { + $shortcodeArray = $shortcode->getData(); + + if(is_array($shortcodeArray) && $shortcodeArray['name'] == 'video' && isset($shortcodeArray['params']['path'])) + { + $relUrl = $shortcodeArray['params']['path']; + $relUrl = '/' . trim($relUrl, '/'); + + # Convert the relative URL to an absolute file path + $filePath = $this->rootpath . $relUrl; + + # check file exists + if(!file_exists($filePath)) + { + $html = '

File not found

'; + } + else + { + # Get file extension using pathinfo() + $fileInfo = pathinfo($filePath); + $extension = strtolower($fileInfo['extension']); // Get file extension and convert to lowercase + $absUrl = $this->baseurl . $relUrl; + + # Determine the correct file type for the video tag + $type = ''; + switch ($extension) { + case 'mp4': + $type = 'mp4'; + break; + case 'webm': + $type = 'webm'; + break; + case 'ogg': + $type = 'ogg'; + break; + default: + $html = '

Unsupported file type

'; + return; // Exit if file type is not supported + } + + $width = $shortcodeArray['params']['width'] ?? '500'; + if (!preg_match('/^(\d+)(px|%)?$/', $width)) + { + $width = '500'; + } + + $preload = 'none'; + if(isset($shortcodeArray['params']['preload']) && ($shortcodeArray['params']['preload'] == 'auto' or $shortcodeArray['params']['preload'] == 'metadata')) + { + $preload = $shortcodeArray['params']['preload']; + } + + $poster = ''; + + if(isset($shortcodeArray['params']['poster'])) + { + $relImgUrl = $shortcodeArray['params']['poster']; + $relImgUrl = '/' . trim($relImgUrl, '/'); + + # Convert the relative URL to an absolute file path + $imgPath = $this->rootpath . $relImgUrl; + + # check file exists + if(file_exists($imgPath)) + { + $absImgUrl = $this->baseurl . $relImgUrl; + $poster = ' poster="' . $absImgUrl . '"'; + } + } + + $html = ''; + } + + $shortcode->setData($html); + } + } +} \ No newline at end of file diff --git a/system/typemill/author/css/custom.css b/system/typemill/author/css/custom.css index f30904b..95f52ec 100644 --- a/system/typemill/author/css/custom.css +++ b/system/typemill/author/css/custom.css @@ -409,7 +409,7 @@ .blox-preview .notice3:before{ content: "!!!"; } .blox-preview .notice4:before{ content: "!!!!"; } -.blox-preview img, img.uploadPreview{ +.blox-preview video, .blox-preview audio, .blox-preview img, img.uploadPreview{ display: block; margin: auto; max-width: 100%; diff --git a/system/typemill/author/css/output.css b/system/typemill/author/css/output.css index 569cb67..a87f392 100644 --- a/system/typemill/author/css/output.css +++ b/system/typemill/author/css/output.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */ /* @@ -30,9 +30,13 @@ 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -42,8 +46,14 @@ html { -o-tab-size: 4; tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -115,8 +125,10 @@ strong { } /* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. */ code, @@ -125,8 +137,12 @@ samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -185,12 +201,18 @@ select, textarea { font-family: inherit; /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -214,9 +236,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -335,6 +357,14 @@ menu { padding: 0; } +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + /* Prevent resizing textareas horizontally by default. */ @@ -355,13 +385,6 @@ input::-moz-placeholder, textarea::-moz-placeholder { /* 2 */ } -input:-ms-input-placeholder, textarea:-ms-input-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - input::placeholder, textarea::placeholder { opacity: 1; @@ -417,6 +440,12 @@ video { height: auto; } +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; @@ -431,6 +460,9 @@ video { --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -462,53 +494,10 @@ video { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; -} - -::-webkit-backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { @@ -525,6 +514,9 @@ video { --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -556,64 +548,68 @@ video { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; -} - -.container { - width: 100%; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } .\!container { width: 100% !important; } -@media (min-width: 640px) { - .container { - max-width: 640px; - } +.container { + width: 100%; +} +@media (min-width: 640px) { .\!container { max-width: 640px !important; } + + .container { + max-width: 640px; + } } @media (min-width: 768px) { - .container { - max-width: 768px; - } - .\!container { max-width: 768px !important; } + + .container { + max-width: 768px; + } } @media (min-width: 1024px) { - .container { - max-width: 1024px; - } - .\!container { max-width: 1024px !important; } + + .container { + max-width: 1024px; + } } @media (min-width: 1280px) { - .container { - max-width: 1280px; - } - .\!container { max-width: 1280px !important; } + + .container { + max-width: 1280px; + } } @media (min-width: 1536px) { - .container { - max-width: 1536px; - } - .\!container { max-width: 1536px !important; } + + .container { + max-width: 1536px; + } } .pointer-events-none { @@ -628,6 +624,10 @@ video { visibility: hidden; } +.collapse { + visibility: collapse; +} + .static { position: static; } @@ -645,20 +645,11 @@ video { } .sticky { - position: -webkit-sticky; position: sticky; } .inset-0 { - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; -} - -.inset-y-0 { - top: 0px; - bottom: 0px; + inset: 0px; } .inset-x-0 { @@ -666,26 +657,39 @@ video { right: 0px; } -.bottom-0 { +.inset-y-0 { + top: 0px; bottom: 0px; } -.top-3 { - top: 0.75rem; +.-bottom-3 { + bottom: -0.75rem; } .-left-5 { left: -1.25rem; } -.top-0 { - top: 0px; +.-top-3 { + top: -0.75rem; +} + +.bottom-0 { + bottom: 0px; +} + +.bottom-3 { + bottom: 0.75rem; } .left-0 { left: 0px; } +.left-1\/2 { + left: 50%; +} + .left-12 { left: 3rem; } @@ -694,30 +698,22 @@ video { right: 0px; } -.-top-3 { - top: -0.75rem; -} - -.left-1\/2 { - left: 50%; -} - -.-bottom-3 { - bottom: -0.75rem; -} - .right-4 { right: 1rem; } -.bottom-3 { - bottom: 0.75rem; +.top-0 { + top: 0px; } .top-10 { top: 2.5rem; } +.top-3 { + top: 0.75rem; +} + .z-10 { z-index: 10; } @@ -742,10 +738,6 @@ video { margin: 0px; } -.m-auto { - margin: auto; -} - .m-1 { margin: 0.25rem; } @@ -754,19 +746,8 @@ video { margin: 0.5rem; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.my-5 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; -} - -.my-px { - margin-top: 1px; - margin-bottom: 1px; +.m-auto { + margin: auto; } .mx-auto { @@ -774,16 +755,16 @@ video { margin-right: auto; } -.my-8 { - margin-top: 2rem; - margin-bottom: 2rem; -} - .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; @@ -794,110 +775,125 @@ video { margin-bottom: 1rem; } -.mr-2 { - margin-right: 0.5rem; +.my-5 { + margin-top: 1.25rem; + margin-bottom: 1.25rem; } -.mt-6 { - margin-top: 1.5rem; +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.my-px { + margin-top: 1px; + margin-bottom: 1px; } .mb-1 { margin-bottom: 0.25rem; } -.mb-2 { - margin-bottom: 0.5rem; -} - -.mt-3 { - margin-top: 0.75rem; -} - -.ml-4 { - margin-left: 1rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mr-1 { - margin-right: 0.25rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.ml-2 { - margin-left: 0.5rem; +.mb-10 { + margin-bottom: 2.5rem; } .mb-16 { margin-bottom: 4rem; } -.mr-3 { - margin-right: 0.75rem; -} - -.mb-8 { - margin-bottom: 2rem; -} - -.mt-1 { - margin-top: 0.25rem; -} - -.mt-5 { - margin-top: 1.25rem; -} - -.mb-5 { - margin-bottom: 1.25rem; +.mb-2 { + margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } -.ml-5 { - margin-left: 1.25rem; +.mb-4 { + margin-bottom: 1rem; } -.mr-5 { - margin-right: 1.25rem; +.mb-5 { + margin-bottom: 1.25rem; } -.mb-10 { - margin-bottom: 2.5rem; +.mb-8 { + margin-bottom: 2rem; } -.mt-8 { - margin-top: 2rem; +.ml-1 { + margin-left: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } +.ml-4 { + margin-left: 1rem; +} + +.ml-5 { + margin-left: 1.25rem; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mr-3 { + margin-right: 0.75rem; +} + +.mr-5 { + margin-right: 1.25rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + .mt-4 { margin-top: 1rem; } -.mt-auto { - margin-top: auto; +.mt-5 { + margin-top: 1.25rem; +} + +.mt-6 { + margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } +.mt-8 { + margin-top: 2rem; +} + +.mt-auto { + margin-top: auto; +} + .block { display: block; } @@ -934,48 +930,48 @@ video { display: none; } -.h-6 { - height: 1.5rem; -} - -.h-24 { - height: 6rem; -} - -.h-5 { - height: 1.25rem; +.h-0 { + height: 0px; } .h-12 { height: 3rem; } -.h-80 { - height: 20rem; -} - -.h-8 { - height: 2rem; -} - -.h-full { - height: 100%; +.h-24 { + height: 6rem; } .h-32 { height: 8rem; } -.h-0 { - height: 0px; +.h-40 { + height: 10rem; } .h-48 { height: 12rem; } -.h-40 { - height: 10rem; +.h-5 { + height: 1.25rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-8 { + height: 2rem; +} + +.h-80 { + height: 20rem; +} + +.h-full { + height: 100%; } .max-h-80 { @@ -986,8 +982,80 @@ video { min-height: 100vh; } -.w-full { - width: 100%; +.w-0 { + width: 0px; +} + +.w-1\/2 { + width: 50%; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-1\/4 { + width: 25%; +} + +.w-1\/5 { + width: 20%; +} + +.w-1\/6 { + width: 16.666667%; +} + +.w-10 { + width: 2.5rem; +} + +.w-11\/12 { + width: 91.666667%; +} + +.w-16 { + width: 4rem; +} + +.w-2\/3 { + width: 66.666667%; +} + +.w-2\/5 { + width: 40%; +} + +.w-20 { + width: 5rem; +} + +.w-24 { + width: 6rem; +} + +.w-3\/4 { + width: 75%; +} + +.w-3\/5 { + width: 60%; +} + +.w-32 { + width: 8rem; +} + +.w-4\/5 { + width: 80%; +} + +.w-5 { + width: 1.25rem; +} + +.w-5\/6 { + width: 83.333333%; } .w-54rem { @@ -998,92 +1066,36 @@ video { width: 1.5rem; } -.w-32 { - width: 8rem; -} - -.w-1\/2 { - width: 50%; -} - -.w-1\/5 { - width: 20%; -} - -.w-4\/5 { - width: 80%; -} - -.w-2\/5 { - width: 40%; -} - -.w-16 { - width: 4rem; -} - -.w-5 { - width: 1.25rem; -} - -.w-20 { - width: 5rem; -} - -.w-1\/4 { - width: 25%; -} - -.w-2\/3 { - width: 66.666667%; -} - -.w-1\/3 { - width: 33.333333%; -} - -.w-80 { - width: 20rem; -} - -.w-1\/6 { - width: 16.666667%; -} - -.w-5\/6 { - width: 83.333333%; -} - -.w-3\/5 { - width: 60%; +.w-60 { + width: 15rem; } .w-7 { width: 1.75rem; } -.w-3\/4 { - width: 75%; +.w-8 { + width: 2rem; } -.w-60 { - width: 15rem; +.w-80 { + width: 20rem; } -.w-0 { - width: 0px; +.w-full { + width: 100%; } -.w-24 { - width: 6rem; +.max-w-4xl { + max-width: 56rem; } -.w-11\/12 { - width: 91.666667%; +.max-w-6xl { + max-width: 72rem; } -.w-10 { - width: 2.5rem; +.max-w-7xl { + max-width: 80rem; } .max-w-md { @@ -1094,18 +1106,6 @@ video { max-width: 20rem; } -.max-w-4xl { - max-width: 56rem; -} - -.max-w-7xl { - max-width: 80rem; -} - -.max-w-6xl { - max-width: 72rem; -} - .flex-1 { flex: 1 1 0%; } @@ -1131,12 +1131,6 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -@-webkit-keyframes spin { - to { - transform: rotate(360deg); - } -} - @keyframes spin { to { transform: rotate(360deg); @@ -1144,8 +1138,7 @@ video { } .animate-spin { - -webkit-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; + animation: spin 1s linear infinite; } .cursor-pointer { @@ -1244,16 +1237,16 @@ video { border-width: 2px; } -.border-y { - border-top-width: 1px; - border-bottom-width: 1px; -} - .border-x-8 { border-left-width: 8px; border-right-width: 8px; } +.border-y { + border-top-width: 1px; + border-bottom-width: 1px; +} + .border-b { border-bottom-width: 1px; } @@ -1262,42 +1255,42 @@ video { border-bottom-width: 2px; } -.border-t { - border-top-width: 1px; -} - -.border-r-2 { - border-right-width: 2px; -} - -.border-r { - border-right-width: 1px; -} - -.border-l { - border-left-width: 1px; -} - -.border-l-4 { - border-left-width: 4px; +.border-b-4 { + border-bottom-width: 4px; } .border-b-8 { border-bottom-width: 8px; } -.border-t-8 { - border-top-width: 8px; -} - -.border-b-4 { - border-bottom-width: 4px; +.border-l { + border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } +.border-l-4 { + border-left-width: 4px; +} + +.border-r { + border-right-width: 1px; +} + +.border-r-2 { + border-right-width: 2px; +} + +.border-t { + border-top-width: 1px; +} + +.border-t-8 { + border-top-width: 8px; +} + .border-solid { border-style: solid; } @@ -1306,64 +1299,29 @@ video { border-style: dotted; } +.border-cyan-500 { + --tw-border-opacity: 1; + border-color: rgb(6 182 212 / var(--tw-border-opacity)); +} + .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-stone-50 { - --tw-border-opacity: 1; - border-color: rgb(250 250 249 / var(--tw-border-opacity)); -} - -.border-white { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - -.border-stone-200 { - --tw-border-opacity: 1; - border-color: rgb(231 229 228 / var(--tw-border-opacity)); -} - -.border-stone-700 { - --tw-border-opacity: 1; - border-color: rgb(68 64 60 / var(--tw-border-opacity)); -} - -.border-stone-300 { - --tw-border-opacity: 1; - border-color: rgb(214 211 209 / var(--tw-border-opacity)); -} - -.border-teal-500 { - --tw-border-opacity: 1; - border-color: rgb(20 184 166 / var(--tw-border-opacity)); -} - -.border-yellow-400 { - --tw-border-opacity: 1; - border-color: rgb(250 204 21 / var(--tw-border-opacity)); -} - -.border-rose-500 { - --tw-border-opacity: 1; - border-color: rgb(244 63 94 / var(--tw-border-opacity)); -} - .border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.border-yellow-500 { +.border-rose-100 { --tw-border-opacity: 1; - border-color: rgb(234 179 8 / var(--tw-border-opacity)); + border-color: rgb(255 228 230 / var(--tw-border-opacity)); } -.border-cyan-500 { +.border-rose-500 { --tw-border-opacity: 1; - border-color: rgb(6 182 212 / var(--tw-border-opacity)); + border-color: rgb(244 63 94 / var(--tw-border-opacity)); } .border-slate-200 { @@ -1371,78 +1329,78 @@ video { border-color: rgb(226 232 240 / var(--tw-border-opacity)); } -.border-rose-100 { - --tw-border-opacity: 1; - border-color: rgb(255 228 230 / var(--tw-border-opacity)); -} - .border-stone-100 { --tw-border-opacity: 1; border-color: rgb(245 245 244 / var(--tw-border-opacity)); } +.border-stone-200 { + --tw-border-opacity: 1; + border-color: rgb(231 229 228 / var(--tw-border-opacity)); +} + +.border-stone-300 { + --tw-border-opacity: 1; + border-color: rgb(214 211 209 / var(--tw-border-opacity)); +} + +.border-stone-50 { + --tw-border-opacity: 1; + border-color: rgb(250 250 249 / var(--tw-border-opacity)); +} + +.border-stone-700 { + --tw-border-opacity: 1; + border-color: rgb(68 64 60 / var(--tw-border-opacity)); +} + +.border-teal-500 { + --tw-border-opacity: 1; + border-color: rgb(20 184 166 / var(--tw-border-opacity)); +} + +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.border-yellow-400 { + --tw-border-opacity: 1; + border-color: rgb(250 204 21 / var(--tw-border-opacity)); +} + +.border-yellow-500 { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity)); +} + .border-x-transparent { border-left-color: transparent; border-right-color: transparent; } +.border-b-black { + --tw-border-opacity: 1; + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + .border-b-white { --tw-border-opacity: 1; border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity)); } -.border-t-white { - --tw-border-opacity: 1; - border-top-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - .border-t-black { --tw-border-opacity: 1; border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.border-b-black { +.border-t-white { --tw-border-opacity: 1; - border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-top-color: rgb(255 255 255 / var(--tw-border-opacity)); } -.bg-teal-600 { - --tw-bg-opacity: 1; - background-color: rgb(13 148 136 / var(--tw-bg-opacity)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.bg-stone-50 { - --tw-bg-opacity: 1; - background-color: rgb(250 250 249 / var(--tw-bg-opacity)); -} - -.bg-stone-100 { - --tw-bg-opacity: 1; - background-color: rgb(245 245 244 / var(--tw-bg-opacity)); -} - -.bg-transparent { - background-color: transparent; -} - -.bg-stone-200 { - --tw-bg-opacity: 1; - background-color: rgb(231 229 228 / var(--tw-bg-opacity)); -} - -.bg-stone-700 { - --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); -} - -.bg-teal-500 { - --tw-bg-opacity: 1; - background-color: rgb(20 184 166 / var(--tw-bg-opacity)); +.bg-black\/75 { + background-color: rgb(0 0 0 / 0.75); } .bg-red-100 { @@ -1450,14 +1408,9 @@ video { background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } -.bg-stone-600 { +.bg-rose-400 { --tw-bg-opacity: 1; - background-color: rgb(87 83 78 / var(--tw-bg-opacity)); -} - -.bg-stone-900 { - --tw-bg-opacity: 1; - background-color: rgb(28 25 23 / var(--tw-bg-opacity)); + background-color: rgb(251 113 133 / var(--tw-bg-opacity)); } .bg-rose-500 { @@ -1465,8 +1418,58 @@ video { background-color: rgb(244 63 94 / var(--tw-bg-opacity)); } -.bg-black\/75 { - background-color: rgb(0 0 0 / 0.75); +.bg-stone-100 { + --tw-bg-opacity: 1; + background-color: rgb(245 245 244 / var(--tw-bg-opacity)); +} + +.bg-stone-200 { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228 / var(--tw-bg-opacity)); +} + +.bg-stone-50 { + --tw-bg-opacity: 1; + background-color: rgb(250 250 249 / var(--tw-bg-opacity)); +} + +.bg-stone-500 { + --tw-bg-opacity: 1; + background-color: rgb(120 113 108 / var(--tw-bg-opacity)); +} + +.bg-stone-600 { + --tw-bg-opacity: 1; + background-color: rgb(87 83 78 / var(--tw-bg-opacity)); +} + +.bg-stone-700 { + --tw-bg-opacity: 1; + background-color: rgb(68 64 60 / var(--tw-bg-opacity)); +} + +.bg-stone-900 { + --tw-bg-opacity: 1; + background-color: rgb(28 25 23 / var(--tw-bg-opacity)); +} + +.bg-teal-500 { + --tw-bg-opacity: 1; + background-color: rgb(20 184 166 / var(--tw-bg-opacity)); +} + +.bg-teal-600 { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-yellow-500 { @@ -1474,11 +1477,6 @@ video { background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.bg-stone-300 { - --tw-bg-opacity: 1; - background-color: rgb(214 211 209 / var(--tw-bg-opacity)); -} - .bg-opacity-90 { --tw-bg-opacity: 0.9; } @@ -1491,16 +1489,24 @@ video { background-clip: padding-box; } -.p-5 { - padding: 1.25rem; +.p-1 { + padding: 0.25rem; +} + +.p-2 { + padding: 0.5rem; } .p-3 { padding: 0.75rem; } -.p-2 { - padding: 0.5rem; +.p-4 { + padding: 1rem; +} + +.p-5 { + padding: 1.25rem; } .p-6 { @@ -1511,52 +1517,9 @@ video { padding: 2rem; } -.p-1 { - padding: 0.25rem; -} - -.p-4 { - padding: 1rem; -} - -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.py-1\.5 { - padding-top: 0.375rem; - padding-bottom: 0.375rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; } .px-12 { @@ -1564,14 +1527,9 @@ video { padding-right: 3rem; } -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.px-16 { + padding-left: 4rem; + padding-right: 4rem; } .px-2 { @@ -1579,19 +1537,14 @@ video { padding-right: 0.5rem; } -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; } -.py-10 { - padding-top: 2.5rem; - padding-bottom: 2.5rem; -} - -.px-8 { - padding-left: 2rem; - padding-right: 2rem; +.px-4 { + padding-left: 1rem; + padding-right: 1rem; } .px-5 { @@ -1599,9 +1552,29 @@ video { padding-right: 1.25rem; } -.px-16 { - padding-left: 4rem; - padding-right: 4rem; +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-10 { + padding-top: 2.5rem; + padding-bottom: 2.5rem; } .py-16 { @@ -1609,34 +1582,67 @@ video { padding-bottom: 4rem; } -.pl-4 { - padding-left: 1rem; +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } -.pr-6 { - padding-right: 1.5rem; +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; } -.pl-10 { - padding-left: 2.5rem; +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; } -.pr-2 { - padding-right: 0.5rem; +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pb-3 { + padding-bottom: 0.75rem; +} + +.pb-4 { + padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } -.pl-3 { - padding-left: 0.75rem; +.pl-10 { + padding-left: 2.5rem; +} + +.pl-12 { + padding-left: 3rem; } .pl-2 { padding-left: 0.5rem; } +.pl-24 { + padding-left: 6rem; +} + +.pl-3 { + padding-left: 0.75rem; +} + +.pl-4 { + padding-left: 1rem; +} + .pl-6 { padding-left: 1.5rem; } @@ -1649,14 +1655,6 @@ video { padding-left: 2.25rem; } -.pl-12 { - padding-left: 3rem; -} - -.pl-24 { - padding-left: 6rem; -} - .pr-1 { padding-right: 0.25rem; } @@ -1665,30 +1663,30 @@ video { padding-right: 2.5rem; } +.pr-2 { + padding-right: 0.5rem; +} + .pr-3 { padding-right: 0.75rem; } -.pb-4 { - padding-bottom: 1rem; +.pr-6 { + padding-right: 1.5rem; } .pt-2 { padding-top: 0.5rem; } -.pt-6 { - padding-top: 1.5rem; -} - -.pb-3 { - padding-bottom: 0.75rem; -} - .pt-3 { padding-top: 0.75rem; } +.pt-6 { + padding-top: 1.5rem; +} + .text-left { text-align: left; } @@ -1713,11 +1711,36 @@ video { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -1728,31 +1751,6 @@ video { line-height: 1rem; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - .font-bold { font-weight: 700; } @@ -1781,9 +1779,14 @@ video { line-height: 1.25; } -.text-white { +.text-black { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); } .text-gray-700 { @@ -1791,14 +1794,9 @@ video { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-stone-50 { +.text-red-500 { --tw-text-opacity: 1; - color: rgb(250 250 249 / var(--tw-text-opacity)); -} - -.text-teal-600 { - --tw-text-opacity: 1; - color: rgb(13 148 136 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); } .text-rose-300 { @@ -1806,14 +1804,29 @@ video { color: rgb(253 164 175 / var(--tw-text-opacity)); } +.text-rose-500 { + --tw-text-opacity: 1; + color: rgb(244 63 94 / var(--tw-text-opacity)); +} + +.text-stone-200 { + --tw-text-opacity: 1; + color: rgb(231 229 228 / var(--tw-text-opacity)); +} + +.text-stone-300 { + --tw-text-opacity: 1; + color: rgb(214 211 209 / var(--tw-text-opacity)); +} + .text-stone-400 { --tw-text-opacity: 1; color: rgb(168 162 158 / var(--tw-text-opacity)); } -.text-stone-900 { +.text-stone-50 { --tw-text-opacity: 1; - color: rgb(28 25 23 / var(--tw-text-opacity)); + color: rgb(250 250 249 / var(--tw-text-opacity)); } .text-stone-500 { @@ -1826,19 +1839,9 @@ video { color: rgb(68 64 60 / var(--tw-text-opacity)); } -.text-stone-300 { +.text-stone-900 { --tw-text-opacity: 1; - color: rgb(214 211 209 / var(--tw-text-opacity)); -} - -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(28 25 23 / var(--tw-text-opacity)); } .text-teal-300 { @@ -1851,24 +1854,18 @@ video { color: rgb(20 184 166 / var(--tw-text-opacity)); } -.text-stone-200 { +.text-teal-600 { --tw-text-opacity: 1; - color: rgb(231 229 228 / var(--tw-text-opacity)); + color: rgb(13 148 136 / var(--tw-text-opacity)); } -.text-black { +.text-white { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.text-rose-500 { - --tw-text-opacity: 1; - color: rgb(244 63 94 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .underline { - -webkit-text-decoration-line: underline; - text-decoration-line: underline; + text-decoration-line: underline; } .caret-white { @@ -1883,17 +1880,17 @@ video { opacity: 0; } -.opacity-75 { - opacity: 0.75; -} - .opacity-25 { opacity: 0.25; } -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); +.opacity-75 { + opacity: 0.75; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -1903,9 +1900,9 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow { - --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -1918,23 +1915,26 @@ video { outline-style: solid; } -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +.\!filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.\!filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; +.\!transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; + transition-duration: 150ms !important; } .transition { - transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -1945,14 +1945,6 @@ video { transition-duration: 150ms; } -.\!transition { - transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter !important; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; - transition-duration: 150ms !important; -} - .duration-100 { transition-duration: 100ms; } @@ -1961,6 +1953,11 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } +.hover\:border-rose-500:hover { + --tw-border-opacity: 1; + border-color: rgb(244 63 94 / var(--tw-border-opacity)); +} + .hover\:border-stone-700:hover { --tw-border-opacity: 1; border-color: rgb(68 64 60 / var(--tw-border-opacity)); @@ -1971,24 +1968,24 @@ video { border-color: rgb(20 184 166 / var(--tw-border-opacity)); } -.hover\:border-rose-500:hover { - --tw-border-opacity: 1; - border-color: rgb(244 63 94 / var(--tw-border-opacity)); +.hover\:bg-rose-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(244 63 94 / var(--tw-bg-opacity)); } -.hover\:bg-stone-50:hover { +.hover\:bg-rose-600:hover { --tw-bg-opacity: 1; - background-color: rgb(250 250 249 / var(--tw-bg-opacity)); + background-color: rgb(225 29 72 / var(--tw-bg-opacity)); } -.hover\:bg-teal-700:hover { +.hover\:bg-rose-700:hover { --tw-bg-opacity: 1; - background-color: rgb(15 118 110 / var(--tw-bg-opacity)); + background-color: rgb(190 18 60 / var(--tw-bg-opacity)); } -.hover\:bg-teal-500:hover { +.hover\:bg-stone-100:hover { --tw-bg-opacity: 1; - background-color: rgb(20 184 166 / var(--tw-bg-opacity)); + background-color: rgb(245 245 244 / var(--tw-bg-opacity)); } .hover\:bg-stone-200:hover { @@ -1996,14 +1993,19 @@ video { background-color: rgb(231 229 228 / var(--tw-bg-opacity)); } -.hover\:bg-rose-500:hover { +.hover\:bg-stone-300:hover { --tw-bg-opacity: 1; - background-color: rgb(244 63 94 / var(--tw-bg-opacity)); + background-color: rgb(214 211 209 / var(--tw-bg-opacity)); } -.hover\:bg-stone-100:hover { +.hover\:bg-stone-50:hover { --tw-bg-opacity: 1; - background-color: rgb(245 245 244 / var(--tw-bg-opacity)); + background-color: rgb(250 250 249 / var(--tw-bg-opacity)); +} + +.hover\:bg-stone-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(87 83 78 / var(--tw-bg-opacity)); } .hover\:bg-stone-700:hover { @@ -2016,14 +2018,9 @@ video { background-color: rgb(28 25 23 / var(--tw-bg-opacity)); } -.hover\:bg-stone-300:hover { +.hover\:bg-teal-500:hover { --tw-bg-opacity: 1; - background-color: rgb(214 211 209 / var(--tw-bg-opacity)); -} - -.hover\:bg-rose-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(190 18 60 / var(--tw-bg-opacity)); + background-color: rgb(20 184 166 / var(--tw-bg-opacity)); } .hover\:bg-teal-600:hover { @@ -2031,29 +2028,19 @@ video { background-color: rgb(13 148 136 / var(--tw-bg-opacity)); } +.hover\:bg-teal-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(15 118 110 / var(--tw-bg-opacity)); +} + .hover\:bg-yellow-600:hover { --tw-bg-opacity: 1; background-color: rgb(202 138 4 / var(--tw-bg-opacity)); } -.hover\:bg-rose-600:hover { +.hover\:bg-stone-800:hover { --tw-bg-opacity: 1; - background-color: rgb(225 29 72 / var(--tw-bg-opacity)); -} - -.hover\:text-stone-800:hover { - --tw-text-opacity: 1; - color: rgb(41 37 36 / var(--tw-text-opacity)); -} - -.hover\:text-stone-50:hover { - --tw-text-opacity: 1; - color: rgb(250 250 249 / var(--tw-text-opacity)); -} - -.hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + background-color: rgb(41 37 36 / var(--tw-bg-opacity)); } .hover\:text-stone-100:hover { @@ -2061,14 +2048,28 @@ video { color: rgb(245 245 244 / var(--tw-text-opacity)); } +.hover\:text-stone-50:hover { + --tw-text-opacity: 1; + color: rgb(250 250 249 / var(--tw-text-opacity)); +} + .hover\:text-stone-700:hover { --tw-text-opacity: 1; color: rgb(68 64 60 / var(--tw-text-opacity)); } +.hover\:text-stone-800:hover { + --tw-text-opacity: 1; + color: rgb(41 37 36 / var(--tw-text-opacity)); +} + +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .hover\:underline:hover { - -webkit-text-decoration-line: underline; - text-decoration-line: underline; + text-decoration-line: underline; } .hover\:opacity-100:hover { @@ -2086,11 +2087,6 @@ video { border-color: rgb(37 99 235 / var(--tw-border-opacity)); } -.focus\:bg-white:focus { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - .focus\:bg-stone-200:focus { --tw-bg-opacity: 1; background-color: rgb(231 229 228 / var(--tw-bg-opacity)); @@ -2101,6 +2097,11 @@ video { background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } +.focus\:bg-white:focus { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + .focus\:text-gray-700:focus { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); @@ -2131,179 +2132,184 @@ video { background-color: rgb(231 229 228 / var(--tw-bg-opacity)); } -.disabled\:text-stone-900:disabled { - --tw-text-opacity: 1; - color: rgb(28 25 23 / var(--tw-text-opacity)); -} - .disabled\:text-stone-800:disabled { --tw-text-opacity: 1; color: rgb(41 37 36 / var(--tw-text-opacity)); } +.disabled\:text-stone-900:disabled { + --tw-text-opacity: 1; + color: rgb(28 25 23 / var(--tw-text-opacity)); +} + .group:hover .group-hover\:visible { visibility: visible; } -.dark .dark\:border { +.dark\:border:is(.dark *) { border-width: 1px; } -.dark .dark\:border-0 { +.dark\:border-0:is(.dark *) { border-width: 0px; } -.dark .dark\:border-stone-600 { +.dark\:border-stone-200:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(231 229 228 / var(--tw-border-opacity)); +} + +.dark\:border-stone-600:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(87 83 78 / var(--tw-border-opacity)); } -.dark .dark\:border-stone-700 { +.dark\:border-stone-700:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(68 64 60 / var(--tw-border-opacity)); } -.dark .dark\:border-stone-900 { +.dark\:border-stone-900:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(28 25 23 / var(--tw-border-opacity)); } -.dark .dark\:border-stone-200 { - --tw-border-opacity: 1; - border-color: rgb(231 229 228 / var(--tw-border-opacity)); +.dark\:bg-stone-200:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228 / var(--tw-bg-opacity)); } -.dark .dark\:bg-stone-700 { +.dark\:bg-stone-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(87 83 78 / var(--tw-bg-opacity)); +} + +.dark\:bg-stone-700:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(68 64 60 / var(--tw-bg-opacity)); } -.dark .dark\:bg-stone-600 { - --tw-bg-opacity: 1; - background-color: rgb(87 83 78 / var(--tw-bg-opacity)); -} - -.dark .dark\:bg-stone-900 { +.dark\:bg-stone-900:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(28 25 23 / var(--tw-bg-opacity)); } -.dark .dark\:bg-stone-200 { - --tw-bg-opacity: 1; - background-color: rgb(231 229 228 / var(--tw-bg-opacity)); -} - -.dark .dark\:text-stone-200 { - --tw-text-opacity: 1; - color: rgb(231 229 228 / var(--tw-text-opacity)); -} - -.dark .dark\:text-stone-900 { - --tw-text-opacity: 1; - color: rgb(28 25 23 / var(--tw-text-opacity)); -} - -.dark .dark\:text-stone-600 { - --tw-text-opacity: 1; - color: rgb(87 83 78 / var(--tw-text-opacity)); -} - -.dark .dark\:text-gray-400 { +.dark\:text-gray-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } -.dark .dark\:text-stone-300 { +.dark\:text-stone-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(231 229 228 / var(--tw-text-opacity)); +} + +.dark\:text-stone-300:is(.dark *) { --tw-text-opacity: 1; color: rgb(214 211 209 / var(--tw-text-opacity)); } -.dark .dark\:text-stone-50 { +.dark\:text-stone-50:is(.dark *) { --tw-text-opacity: 1; color: rgb(250 250 249 / var(--tw-text-opacity)); } -.dark .hover\:dark\:border-stone-200:hover { - --tw-border-opacity: 1; - border-color: rgb(231 229 228 / var(--tw-border-opacity)); +.dark\:text-stone-600:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(87 83 78 / var(--tw-text-opacity)); } -.dark .hover\:dark\:border-rose-500:hover { +.dark\:text-stone-900:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(28 25 23 / var(--tw-text-opacity)); +} + +.hover\:dark\:border-rose-500:is(.dark *):hover { --tw-border-opacity: 1; border-color: rgb(244 63 94 / var(--tw-border-opacity)); } -.dark .hover\:dark\:border-stone-600:hover { +.hover\:dark\:border-stone-200:is(.dark *):hover { + --tw-border-opacity: 1; + border-color: rgb(231 229 228 / var(--tw-border-opacity)); +} + +.hover\:dark\:border-stone-600:is(.dark *):hover { --tw-border-opacity: 1; border-color: rgb(87 83 78 / var(--tw-border-opacity)); } -.dark .hover\:dark\:bg-teal-500:hover { +.dark\:hover\:bg-stone-200:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228 / var(--tw-bg-opacity)); +} + +.dark\:hover\:bg-teal-500:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity)); } -.dark .hover\:dark\:bg-rose-500:hover { +.hover\:dark\:bg-rose-500:is(.dark *):hover { --tw-bg-opacity: 1; background-color: rgb(244 63 94 / var(--tw-bg-opacity)); } -.dark .hover\:dark\:bg-stone-900:hover { +.hover\:dark\:bg-stone-200:is(.dark *):hover { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228 / var(--tw-bg-opacity)); +} + +.hover\:dark\:bg-stone-500:is(.dark *):hover { + --tw-bg-opacity: 1; + background-color: rgb(120 113 108 / var(--tw-bg-opacity)); +} + +.hover\:dark\:bg-stone-600:is(.dark *):hover { + --tw-bg-opacity: 1; + background-color: rgb(87 83 78 / var(--tw-bg-opacity)); +} + +.hover\:dark\:bg-stone-900:is(.dark *):hover { --tw-bg-opacity: 1; background-color: rgb(28 25 23 / var(--tw-bg-opacity)); } -.dark .hover\:dark\:bg-stone-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(87 83 78 / var(--tw-bg-opacity)); -} - -.dark .dark\:hover\:bg-stone-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(231 229 228 / var(--tw-bg-opacity)); -} - -.dark .hover\:dark\:bg-stone-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(231 229 228 / var(--tw-bg-opacity)); -} - -.dark .dark\:hover\:bg-teal-500:hover { +.hover\:dark\:bg-teal-500:is(.dark *):hover { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity)); } -.dark .hover\:dark\:text-stone-900:hover { +.hover\:dark\:text-stone-900:is(.dark *):hover { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } -.dark .focus\:dark\:border-stone-600:focus { +.focus\:dark\:border-stone-600:is(.dark *):focus { --tw-border-opacity: 1; border-color: rgb(87 83 78 / var(--tw-border-opacity)); } -.dark .focus\:dark\:text-stone-900:focus { +.focus\:dark\:text-stone-900:is(.dark *):focus { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } -.dark .active\:dark\:border-stone-600:active { +.active\:dark\:border-stone-600:is(.dark *):active { --tw-border-opacity: 1; border-color: rgb(87 83 78 / var(--tw-border-opacity)); } -.dark .active\:dark\:text-stone-900:active { +.active\:dark\:text-stone-900:is(.dark *):active { --tw-text-opacity: 1; color: rgb(28 25 23 / var(--tw-text-opacity)); } -.dark .disabled\:dark\:bg-stone-600:disabled { +.disabled\:dark\:bg-stone-600:is(.dark *):disabled { --tw-bg-opacity: 1; background-color: rgb(87 83 78 / var(--tw-bg-opacity)); } -.dark .disabled\:dark\:text-stone-200:disabled { +.disabled\:dark\:text-stone-200:is(.dark *):disabled { --tw-text-opacity: 1; color: rgb(231 229 228 / var(--tw-text-opacity)); } @@ -2343,16 +2349,16 @@ video { width: 50%; } - .lg\:w-half { - width: 48%; + .lg\:w-1\/4 { + width: 25%; } .lg\:w-3\/4 { width: 75%; } - .lg\:w-1\/4 { - width: 25%; + .lg\:w-half { + width: 48%; } .lg\:flex-row { @@ -2377,14 +2383,14 @@ video { padding-right: 1rem; } - .lg\:pt-4 { - padding-top: 1rem; - } - .lg\:pb-3 { padding-bottom: 0.75rem; } + .lg\:pt-4 { + padding-top: 1rem; + } + .lg\:text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); diff --git a/system/typemill/author/js/vue-blox-components.js b/system/typemill/author/js/vue-blox-components.js index 2b523db..68c70f0 100644 --- a/system/typemill/author/js/vue-blox-components.js +++ b/system/typemill/author/js/vue-blox-components.js @@ -2306,128 +2306,338 @@ bloxeditor.component('file-component', { bloxeditor.component('video-component', { props: ['markdown', 'disabled', 'index'], - template: `
-
- - - + components: { + medialib: medialib + }, + template: `
+ +
+
+ +

+ + + + {{ $filters.translate('upload video') }} +

-
- - + +
+ + +
+ +
-
`, + + +
+ + +
+ + +
+ + + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+
`, data: function(){ return { - edited: false, - url: false, - videoid: false, - param: false, - path: false, - provider: false, - providerurl: false, - compmarkdown: '', + maxsize: 100, // megabyte + showmedialib: false, + load: false, + filemeta: false, + fileextension: '', + allowedImageExtensions: ['webp', 'png', 'svg', 'jpg', 'jpeg'], + allowedExtensions: ['mp4', 'webm', 'ogg'], + fileurl: '', + width: '500', + fileid: '', + imageurl: '', + savefile: false, + mediatypes: 'files', + preload: 'none', } }, - mounted: function(){ + mounted: function() { + eventBus.$on('beforeSave', this.beforeSave); - eventBus.$on('beforeSave', this.beforeSave ); + this.$refs.markdown.focus(); - this.$refs.markdown.focus(); + if (this.markdown) + { + this.filemeta = true; - if(this.markdown) - { - this.parseImageMarkdown(this.markdown); - } + var fileurl = this.markdown.match(/path="(.*?)"/); + if (fileurl && fileurl[1]) + { + this.fileurl = fileurl[1]; + } + + var width = this.markdown.match(/width="(.*?)"/); + if (width && width[1]) + { + this.width = width[1]; + } + + var preload = this.markdown.match(/preload="(.*?)"/); + if (preload && preload[1]) + { + this.preload = preload[1]; + } + + var poster = this.markdown.match(/poster="(.*?)"/); + if (poster && poster[1]) + { + this.imageurl = poster[1]; + } + } }, methods: { - generateMarkdown() + addFromMedialibFunction(file) { - this.compmarkdown = '![' + this.provider + '-video](' + this.path + ' "click to load video"){#' + this.videoid + ' .' + this.provider + '}'; + this.showmedialib = false; + this.savefile = false; + this.filemeta = true; + + if (typeof file === 'string') + { + let fileExtension = file.split('.').pop().toLowerCase(); + + if (this.allowedImageExtensions.includes(fileExtension)) + { + this.imageurl = file; + } + else + { + let message = "Unsupported file type. Please select an image with format webp, png, jpg, jpeg. svg."; + eventBus.$emit('publishermessage', message); + return; + } + } + else if (this.allowedExtensions.includes(file.info.extension.toLowerCase())) + { + this.filetitle = file.name; + this.fileextension = file.info.extension.toLowerCase(); + this.fileurl = file.url; + } + else + { + let message = "Unsupported file type. Please select a valid video file (webm, mp4, ogg)."; + eventBus.$emit('publishermessage', message); + return; + } + + this.createmarkdown(); }, - parseImageMarkdown(imageMarkdown) + openmedialib(type) { - let regexpurl = /\((.*)(".*")\)/; - let match = imageMarkdown.match(regexpurl); - let imageUrl = match[1]; - - let regexprov = /live\/(.*?)-/; - let matchprov = imageUrl.match(regexprov); - this.provider = matchprov[1]; - - if(this.provider == 'youtube') - { - this.providerurl = "https://www.youtube.com/watch"; - this.param = "v="; - } - - let videoid = imageMarkdown.match(/#.*? /); - if(videoid) - { - this.videoid = videoid[0].trim().substring(1); - } - - this.updatemarkdown(this.providerurl + "?" + this.param + this.videoid); + this.showmedialib = type; }, - parseUrl(url) + deleteImage() { - let urlparts = url.split('?'); - let urlParams = new URLSearchParams(urlparts[1]); - - this.providerurl = urlparts[0]; - - if(urlParams.has("v")) + this.imageurl = ''; + }, + isChecked(classname) + { + if(this.fileclass == classname) { - this.param = "v="; - this.videoid = urlParams.get("v"); - this.provider = "youtube"; - } - if(this.provider != "youtube") - { - this.updatemarkdown(""); - let message = this.$filters.translate("We only support youtube right now."); - eventBus.$emit('publishermessage', message); + return ' checked'; } }, - updatemarkdown(url) + updatemarkdown(event, url) { - this.edited = true; - this.url = url; - this.parseUrl(url); - this.generateMarkdown(); - this.$emit('updateMarkdownEvent', url); + this.$emit('updateMarkdownEvent', event.target.value); + }, + createmarkdown() + { + var errors = false; + var filemarkdown = false; + + if (this.fileurl !== '') + { + if (this.fileurl.length < 101) + { + var width = this.width ? ' width="' + this.width + '"' : ''; + var preload = this.preload ? ' preload="' + this.preload + '"' : ' preload="none"'; + var poster = this.imageurl ? ' poster="' + this.imageurl + '"' : ''; + + filemarkdown = '[:video path="' + this.fileurl + '"' + width + preload + poster + ' :]'; + } + else + { + errors = this.$filters.translate('Maximum size of file link is 100 characters'); + } + } + + if (errors) + { + eventBus.$emit('publishermessage', this.$filters.translate(errors)); + } + else if (filemarkdown) + { + this.$emit('updateMarkdownEvent', filemarkdown); + this.compmarkdown = filemarkdown; + } + }, + onFileChange( e ) + { + if(e.target.files.length > 0) + { + let uploadedFile = e.target.files[0]; + + let allowedVideoTypes = ['video/mp4', 'video/webm', 'video/ogg']; + if (!allowedVideoTypes.includes(uploadedFile.type)) { + let message = "Unsupported file type. Please select a video file (mp4, webm, ogg)."; + eventBus.$emit('publishermessage', message); + return; + } + + let size = uploadedFile.size / 1024 / 1024; + + if (size > this.maxsize) + { + let message = "The maximal size of a file is " + this.maxsize + " MB"; + eventBus.$emit('publishermessage', message); + return; + } + else + { + self = this; + + self.load = true; + + let reader = new FileReader(); + reader.readAsDataURL(uploadedFile); + reader.onload = function(e) { + + tmaxios.post('/api/v1/file',{ + 'url': data.urlinfo.route, + 'file': e.target.result, + 'name': uploadedFile.name, + }) + .then(function (response) { + + self.load = false; + + self.filemeta = true; + self.savefile = true; + self.filetitle = response.data.fileinfo.title; + self.fileextension = response.data.fileinfo.extension; + self.fileurl = response.data.filepath; + self.selectedrole = ''; + + self.createmarkdown(); + }) + .catch(function (error) + { + self.load = false; + if(error.response) + { + let message = self.$filters.translate(error.response.data.message); + eventBus.$emit('publishermessage', message); + } + }); + } + } + } }, beforeSave() { - if(!this.edited) + /* publish file before you save markdown */ + + if(!this.fileurl) { - eventBus.$emit('closeComponents'); + let message = this.$filters.translate('file is missing.'); + eventBus.$emit('publishermessage', message); + return; } - var self = this; - tmaxios.post('/api/v1/video',{ - 'url': data.urlinfo.route, - 'videourl': this.url, - 'provider': this.provider, - 'providerurl': this.providerurl, - 'videoid': this.videoid, - }) - .then(function (response) + const fileExtension = this.fileurl.split('.').pop().toLowerCase(); + + if (!this.allowedExtensions.includes(fileExtension)) + { + let message = this.$filters.translate('Unsupported file format. Only MP4, WebM, and OGG files are allowed.'); + eventBus.$emit('publishermessage', message); + + return; + } + + if(!this.savefile) { - self.path = response.data.path; - self.$emit('saveBlockEvent'); - }) - .catch(function (error) + this.createmarkdown(); + this.$emit('saveBlockEvent'); + } + else { - if(error.response) + var self = this; + + tmaxios.put('/api/v1/file',{ + 'url': data.urlinfo.route, + 'file': this.fileurl, + }) + .then(function (response) { - let message = self.$filters.translate(error.response.data.message); - eventBus.$emit('publishermessage', message); - } - }); - }, - }, + self.fileurl = response.data.path; + + self.createmarkdown(); + + self.$emit('saveBlockEvent'); + }) + .catch(function (error) + { + if(error.response) + { + let message = self.$filters.translate(error.response.data.message); + eventBus.$emit('publishermessage', message); + } + }); + } + }, + } }) bloxeditor.component('shortcode-component', { @@ -2593,4 +2803,131 @@ bloxeditor.component('shortcode-component', { this.$emit('updateMarkdownEvent', event.target.value); }, }, -}) \ No newline at end of file +}) + +/* deprecated, use embed plugin instead */ +bloxeditor.component('youtube-component', { + props: ['markdown', 'disabled', 'index'], + template: `
+
+ + + +
+
+ + +
+
`, + data: function(){ + return { + edited: false, + url: false, + videoid: false, + param: false, + path: false, + provider: false, + providerurl: false, + compmarkdown: '', + } + }, + mounted: function(){ + + eventBus.$on('beforeSave', this.beforeSave ); + + this.$refs.markdown.focus(); + + if(this.markdown) + { + this.parseImageMarkdown(this.markdown); + } + }, + methods: { + generateMarkdown() + { + this.compmarkdown = '![' + this.provider + '-video](' + this.path + ' "click to load video"){#' + this.videoid + ' .' + this.provider + '}'; + }, + parseImageMarkdown(imageMarkdown) + { + let regexpurl = /\((.*)(".*")\)/; + let match = imageMarkdown.match(regexpurl); + let imageUrl = match[1]; + + let regexprov = /live\/(.*?)-/; + let matchprov = imageUrl.match(regexprov); + this.provider = matchprov[1]; + + if(this.provider == 'youtube') + { + this.providerurl = "https://www.youtube.com/watch"; + this.param = "v="; + } + + let videoid = imageMarkdown.match(/#.*? /); + if(videoid) + { + this.videoid = videoid[0].trim().substring(1); + } + + this.updatemarkdown(this.providerurl + "?" + this.param + this.videoid); + }, + parseUrl(url) + { + let urlparts = url.split('?'); + let urlParams = new URLSearchParams(urlparts[1]); + + this.providerurl = urlparts[0]; + + if(urlParams.has("v")) + { + this.param = "v="; + this.videoid = urlParams.get("v"); + this.provider = "youtube"; + } + if(this.provider != "youtube") + { + this.updatemarkdown(""); + let message = this.$filters.translate("We only support youtube right now."); + eventBus.$emit('publishermessage', message); + } + }, + updatemarkdown(url) + { + this.edited = true; + this.url = url; + this.parseUrl(url); + this.generateMarkdown(); + this.$emit('updateMarkdownEvent', url); + }, + beforeSave() + { + if(!this.edited) + { + eventBus.$emit('closeComponents'); + return; + } + var self = this; + + tmaxios.post('/api/v1/video',{ + 'url': data.urlinfo.route, + 'videourl': this.url, + 'provider': this.provider, + 'providerurl': this.providerurl, + 'videoid': this.videoid, + }) + .then(function (response) + { + self.path = response.data.path; + self.$emit('saveBlockEvent'); + }) + .catch(function (error) + { + if(error.response) + { + let message = self.$filters.translate(error.response.data.message); + eventBus.$emit('publishermessage', message); + } + }); + }, + }, +}) diff --git a/system/typemill/author/js/vue-blox-config.js b/system/typemill/author/js/vue-blox-config.js index 3609268..6f8f211 100644 --- a/system/typemill/author/js/vue-blox-config.js +++ b/system/typemill/author/js/vue-blox-config.js @@ -49,21 +49,12 @@ const determiner = { } return false; }, - /* - video: function(block,lines,firstChar,secondChar,thirdChar){ - if( (firstChar == '!' && secondChar == '[' && lines[0].indexOf('.youtube') != -1) || (firstChar == '[' && secondChar == '!' && lines[0].indexOf('.youtube') != -1) ) - { - return "video-component"; - } - return false; - }, - */ image: function(block,lines,firstChar,secondChar,thirdChar){ if( (firstChar == '!' && secondChar == '[' ) || (firstChar == '[' && secondChar == '!' && thirdChar == '[') ) { if(block.indexOf("-video") != -1) { - return "video-component"; + return "youtube-component"; } return "image-component"; } @@ -76,6 +67,13 @@ const determiner = { } return false; }, + video: function(block,lines,firstChar,secondChar,thirdChar){ + if (lines[0].startsWith('[:video')) + { + return "video-component"; + } + return false; + }, code: function(block,lines,firstChar,secondChar,thirdChar){ if( firstChar == '`' && secondChar == '`' && thirdChar == '`') { @@ -115,22 +113,23 @@ const bloxFormats = { quote: { label: '', title: 'Quote', component: 'quote-component' }, notice: { label: '', title: 'Notice', component: 'notice-component' }, image: { label: '', title: 'Image', component: 'image-component' }, - video: { label: '', title: 'Video', component: 'video-component' }, + video: { label: '', title: 'Video', component: 'video-component' }, file: { label: '', title: 'File', component: 'file-component' }, toc: { label: '', title: 'Table of Contents', component: 'toc-component' }, hr: { label: '', title: 'Horizontal Line', component: 'hr-component' }, definition: { label: '', title: 'Definition List', component: 'definition-component' }, code: { label: '', title: 'Code', component: 'code-component' }, shortcode: { label: '', title: 'Shortcode', component: 'shortcode-component' }, + youtube: { label: '', title: 'YouTube', component: 'youtube-component' }, }; const formatConfig = data.settings.formats; -const activeFormats = []; +const activeFormats = {}; -for(var i = 0; i < formatConfig.length; i++) +for (const format in bloxFormats) { - if(bloxFormats[formatConfig[i]] !== undefined) - { - activeFormats.push(bloxFormats[formatConfig[i]]); - } -} + if (formatConfig.includes(format)) + { + activeFormats[format] = bloxFormats[format]; + } +} \ No newline at end of file diff --git a/system/typemill/author/js/vue-blox.js b/system/typemill/author/js/vue-blox.js index d0b45ce..da835c0 100644 --- a/system/typemill/author/js/vue-blox.js +++ b/system/typemill/author/js/vue-blox.js @@ -173,7 +173,7 @@ bloxeditor.component('content-block', { componentType: false, updatedmarkdown: false, - formats: bloxFormats, + formats: activeFormats, hasUnsafedContent: false, countUpdates: 0 } @@ -269,7 +269,6 @@ bloxeditor.component('content-block', { let markdown = this.element.markdown; let lines = markdown.split("\n"); - let blockType = 'markdown-component'; for (var method in determiner) { @@ -277,11 +276,11 @@ bloxeditor.component('content-block', { if(specialBlock) { - blockType = specialBlock; + return specialBlock; } } - return blockType; + return 'markdown-component'; }, updateMarkdownFunction(value) { @@ -433,7 +432,7 @@ bloxeditor.component('new-block',{ `, data: function () { return { - formats: bloxFormats, + formats: activeFormats, componentType: false, disabled: false, newblockmarkdown: '', diff --git a/system/typemill/author/js/vue-medialib.js b/system/typemill/author/js/vue-medialib.js index 43b7e93..c49c2c0 100644 --- a/system/typemill/author/js/vue-medialib.js +++ b/system/typemill/author/js/vue-medialib.js @@ -252,12 +252,12 @@ const medialib = { if(this.parentcomponent == 'files') { this.showFiles(); - this.active = 'pageFiles'; +/* this.active = 'pageFiles'; */ } if(this.parentcomponent == 'images') { this.showImages(); - this.active = 'pageImages'; +/* this.active = 'pageImages'; */ } }, computed: { diff --git a/system/typemill/author/partials/symbols.twig b/system/typemill/author/partials/symbols.twig index 051727a..317d941 100644 --- a/system/typemill/author/partials/symbols.twig +++ b/system/typemill/author/partials/symbols.twig @@ -42,6 +42,10 @@ {{ translate('VIDEO') }} + + {{ translate('VIDEO') }} + + {{ translate('QUOTES') }} diff --git a/system/typemill/settings/system.yaml b/system/typemill/settings/system.yaml index e24e6e5..ed05967 100644 --- a/system/typemill/settings/system.yaml +++ b/system/typemill/settings/system.yaml @@ -132,6 +132,7 @@ fieldsetwriting: 'definition': 'definition list' 'code': 'code' 'shortcode': 'shortcode' + 'youtube': 'YouTube (deprecated)' headlineanchors: type: checkbox label: 'Headline anchors' diff --git a/system/typemill/system.php b/system/typemill/system.php index a02daa8..182be3b 100644 --- a/system/typemill/system.php +++ b/system/typemill/system.php @@ -33,6 +33,7 @@ use Typemill\Middleware\FlashMessages; use Typemill\Middleware\AssetMiddleware; use Typemill\Middleware\SecurityMiddleware; use Typemill\Middleware\CustomHeadersMiddleware; +use Typemill\Extensions\MediaExtension; use Typemill\Extensions\TwigCsrfExtension; use Typemill\Extensions\TwigUrlExtension; use Typemill\Extensions\TwigUserExtension; @@ -222,6 +223,9 @@ if(isset($updateSettings)) $settingsModel->updateSettings($pluginSettings, 'plugins'); } +# add media extension to integrate video/audio with shortcodes +$dispatcher->addSubscriber(new MediaExtension($settings['rootPath'], $urlinfo['baseurl'])); + # add final settings to the container $container->set('settings', function() use ($settings){ return $settings; }); diff --git a/themes/cyanine/css/style.css b/themes/cyanine/css/style.css index 6e3e6e2..78e3652 100644 --- a/themes/cyanine/css/style.css +++ b/themes/cyanine/css/style.css @@ -140,7 +140,7 @@ img, figure,figure img{ height: auto; aspect-ratio: attr(width) / attr(height); } -figure{ +figure, video, audio{ display: table; margin: 2em auto; padding: 0;