Skip to content

R
react-ag-qeditor
Commit 1ce37a2c by Рамис
Options

fix bugs videoLocal

parent 94933f94
Showing with 351 additions and 25 deletions
example/public/preloader.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preloader video optimize</title>
</head>
<style>
*{
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
html, body{
margin: 0;
padding: 0;
font-synthesis: none;
-moz-font-feature-settings: 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
direction: ltr;
}
.preloader{
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #373b42;
color: #fff;
font-family: 'SF Pro Text';
font-size: 24px;
justify-content: center;
align-items: center;
flex-direction: column;
}
.preloader__circle{
margin-bottom: 40px;
}
.preloader__text{
text-align: center;
max-width: 670px;
}
.preloader__text__desc{
font-size: 18px;
}
.infinity {
width: 120px;
height: 60px;
position: relative;
}
.infinity div,
.infinity span {
position: absolute;
}
.infinity div {
top: 0;
left: 50%;
width: 60px;
height: 60px;
-webkit-animation: rotate 6.9s linear infinite;
animation: rotate 6.9s linear infinite;
}
.infinity div span {
left: -8px;
top: 50%;
margin: -8px 0 0 0;
width: 16px;
height: 16px;
display: block;
background: #ffffff;
box-shadow: 2px 2px 8px rgba(140, 111, 240, 0.09);
border-radius: 50%;
transform: rotate(90deg);
-webkit-animation: move 6.9s linear infinite;
animation: move 6.9s linear infinite;
}
.infinity div span:before, .infinity div span:after {
content: "";
position: absolute;
display: block;
border-radius: 50%;
width: 14px;
height: 14px;
background: inherit;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
box-shadow: inherit;
}
.infinity div span:before {
-webkit-animation: drop1 0.8s linear infinite;
animation: drop1 0.8s linear infinite;
}
.infinity div span:after {
-webkit-animation: drop2 0.8s linear infinite 0.4s;
animation: drop2 0.8s linear infinite 0.4s;
}
.infinity div:nth-child(2) {
-webkit-animation-delay: -2.3s;
animation-delay: -2.3s;
}
.infinity div:nth-child(2) span {
-webkit-animation-delay: -2.3s;
animation-delay: -2.3s;
}
.infinity div:nth-child(3) {
-webkit-animation-delay: -4.6s;
animation-delay: -4.6s;
}
.infinity div:nth-child(3) span {
-webkit-animation-delay: -4.6s;
animation-delay: -4.6s;
}
.infinityChrome {
width: 128px;
height: 60px;
}
.infinityChrome div {
position: absolute;
width: 16px;
height: 16px;
background: #ffffff;
box-shadow: 2px 2px 8px rgba(140, 111, 240, 0.09);
border-radius: 50%;
-webkit-animation: moveSvg 6.9s linear infinite;
animation: moveSvg 6.9s linear infinite;
filter: url(#goo);
transform: scaleX(-1);
offset-path: path("M64.3636364,29.4064278 C77.8909091,43.5203348 84.4363636,56 98.5454545,56 C112.654545,56 124,44.4117395 124,30.0006975 C124,15.5896556 112.654545,3.85282763 98.5454545,4.00139508 C84.4363636,4.14996252 79.2,14.6982509 66.4,29.4064278 C53.4545455,42.4803627 43.5636364,56 29.4545455,56 C15.3454545,56 4,44.4117395 4,30.0006975 C4,15.5896556 15.3454545,4.00139508 29.4545455,4.00139508 C43.5636364,4.00139508 53.1636364,17.8181672 64.3636364,29.4064278 Z");
}
.infinityChrome div:before, .infinityChrome div:after {
content: "";
position: absolute;
display: block;
border-radius: 50%;
width: 14px;
height: 14px;
background: inherit;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
box-shadow: inherit;
}
.infinityChrome div:before {
-webkit-animation: drop1 0.8s linear infinite;
animation: drop1 0.8s linear infinite;
}
.infinityChrome div:after {
-webkit-animation: drop2 0.8s linear infinite 0.4s;
animation: drop2 0.8s linear infinite 0.4s;
}
.infinityChrome div:nth-child(2) {
-webkit-animation-delay: -2.3s;
animation-delay: -2.3s;
}
.infinityChrome div:nth-child(3) {
-webkit-animation-delay: -4.6s;
animation-delay: -4.6s;
}
@-webkit-keyframes moveSvg {
0% {
offset-distance: 0%;
}
25% {
background: #ffffff;
}
75% {
background: #1790FF;
}
100% {
offset-distance: 100%;
}
}
@keyframes moveSvg {
0% {
offset-distance: 0;
}
25% {
background: #ffffff;
}
75% {
background: #ffffff;
}
100% {
offset-distance: 100%;
}
}
@-webkit-keyframes rotate {
50% {
transform: rotate(360deg);
margin-left: 0;
}
50.0001%, 100% {
margin-left: -60px;
}
}
@keyframes rotate {
50% {
transform: rotate(360deg);
margin-left: 0;
}
50.0001%, 100% {
margin-left: -60px;
}
}
@-webkit-keyframes move {
0%, 50% {
left: -8px;
}
25% {
background: #ffffff;
}
75% {
background: #ffffff;
}
50.0001%, 100% {
left: auto;
right: -8px;
}
}
@keyframes move {
0%, 50% {
left: -8px;
}
25% {
background: #ffffff;
}
75% {
background: #ffffff;
}
50.0001%, 100% {
left: auto;
right: -8px;
}
}
@-webkit-keyframes drop1 {
100% {
transform: translate(32px, 8px) scale(0);
}
}
@keyframes drop1 {
100% {
transform: translate(32px, 8px) scale(0);
}
}
@-webkit-keyframes drop2 {
0% {
transform: translate(0, 0) scale(0.9);
}
100% {
transform: translate(32px, -8px) scale(0);
}
}
@keyframes drop2 {
0% {
transform: translate(0, 0) scale(0.9);
}
100% {
transform: translate(32px, -8px) scale(0);
}
}
.infinity {
display: none;
}
html {
-webkit-font-smoothing: antialiased;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
</style>
<body>
<div class="preloader_wrap">
<div class="preloader">
<div class="preloader__circle">
<!-- Google Chrome -->
<div class="infinityChrome">
<div></div>
<div></div>
<div></div>
</div>
<!-- Stuff -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5557955-Infinity-Loader" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
</div>
<div class="preloader__text">
Идёт оптимизация загруженного видео<br />
<p class="preloader__text__desc">Это может занять довольно длительное время в&nbsp;зависимости от&nbsp;длины ролика, вы&nbsp;можете нажать кнопку &laquo;Cохранить&raquo; в&nbsp;модуле и&nbsp;продолжить его редактирование. При следующем открытии модуля видео появится</p>
</div>
</div>
</div>
</body>
</html>
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "0.0.14", "version": "0.0.15",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
...@@ -26,10 +26,11 @@ export default class QEditor extends React.Component { ...@@ -26,10 +26,11 @@ export default class QEditor extends React.Component {
focusedIndex: 0 focusedIndex: 0
} }
Quill.register('formats/video', VideoBlot)
Quill.register('formats/videoLocal', VideoLocalBlot) Quill.register('formats/videoLocal', VideoLocalBlot)
Quill.register('modules/blotFormatter', BlotFormatter) Quill.register('modules/blotFormatter', BlotFormatter)
Quill.register('formats/image', ImageBlot) Quill.register('formats/image', ImageBlot)
Quill.register('formats/video', VideoBlot)
} }
componentDidMount () { componentDidMount () {
...@@ -37,19 +38,19 @@ export default class QEditor extends React.Component { ...@@ -37,19 +38,19 @@ export default class QEditor extends React.Component {
init: true init: true
}); });
if(window.checkOptimizeVideo === undefined){ // if(window.checkOptimizeVideo === undefined){
window.checkOptimizeVideo = setInterval(()=>{ // window.checkOptimizeVideo = setInterval(()=>{
const children = [...document.getElementsByTagName('video')]; // const children = [...document.getElementsByTagName('video')];
//
if(children.length > 0){ // if(children.length > 0){
children.forEach((video, i) => { // children.forEach((video, i) => {
if(video.duration === 2.48){ // if(video.duration === 2.48){
video.setAttribute('src', video.getAttribute('src') + `?${Date.now()/1000}`) // video.setAttribute('src', video.getAttribute('src').split('?')[0] + `?f=${parseInt(Date.now()/1000)}`)
} // }
}) // })
} // }
}, 3000); // }, 3000);
} // }
} }
modules = { modules = {
...@@ -116,7 +117,7 @@ export default class QEditor extends React.Component { ...@@ -116,7 +117,7 @@ export default class QEditor extends React.Component {
'bold', 'italic', 'underline', 'strike', 'blockquote', 'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent', 'list', 'bullet', 'indent',
'align', 'align',
'link', 'image', 'video', 'color', 'background', 'videoLocal', 'link', 'image', 'color', 'background', 'video', 'videoLocal',
'formula', 'formula',
] ]
......
src/blots/VideoBlot.js
...@@ -3,9 +3,6 @@ import { Quill } from 'react-quill' ...@@ -3,9 +3,6 @@ import { Quill } from 'react-quill'
const Video = Quill.import('formats/video') const Video = Quill.import('formats/video')
export default class VideoBlot extends Video { export default class VideoBlot extends Video {
static tagName = 'iframe'
static blotName = 'video';
static create (value) { static create (value) {
let type = ''; let type = '';
let node = null; let node = null;
...@@ -47,3 +44,6 @@ export default class VideoBlot extends Video { ...@@ -47,3 +44,6 @@ export default class VideoBlot extends Video {
return node; return node;
} }
} }
VideoBlot.tagName = 'IFRAME';
VideoBlot.blotName = 'video';
src/blots/VideoLocalBlot.js
...@@ -5,15 +5,9 @@ const BlockEmbed = Quill.import('blots/block/embed'); ...@@ -5,15 +5,9 @@ const BlockEmbed = Quill.import('blots/block/embed');
export default class VideoLocalBlot extends BlockEmbed { export default class VideoLocalBlot extends BlockEmbed {
static tagName = 'video';
static blotName = 'videoLocal';
static create (value){ static create (value){
let node = super.create(value); let node = super.create(value);
node.setAttribute('class', 'ql-video');
// node.setAttribute('autoplay', true);
// node.setAttribute('loop', true);
node.setAttribute('src', value); node.setAttribute('src', value);
node.setAttribute('controls', true); node.setAttribute('controls', true);
node.setAttribute('disabled', true); node.setAttribute('disabled', true);
...@@ -26,3 +20,7 @@ export default class VideoLocalBlot extends BlockEmbed { ...@@ -26,3 +20,7 @@ export default class VideoLocalBlot extends BlockEmbed {
return node.getAttribute('src'); return node.getAttribute('src');
} }
} }
VideoLocalBlot.tagName = 'VIDEO';
VideoLocalBlot.className = 'ql-video-local';
VideoLocalBlot.blotName = 'videoLocal';
src/index.scss
...@@ -42,6 +42,11 @@ body{ ...@@ -42,6 +42,11 @@ body{
//white-space: normal; //white-space: normal;
min-height: 260px; min-height: 260px;
.ql-video-local{
display: block;
max-width: 100%;
}
&:after{ &:after{
content: ""; content: "";
display: block; display: block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment