fixe video pause on timeline

kode-team · Jun 10, 2020 · ef29057 · ef29057
1 parent 56bcdc8
commit ef29057
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 8 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d515be01f10bb5a2f1e3.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.456429fc47dec0278d9d.js"></script></body> </html> 
+<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d515be01f10bb5a2f1e3.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.803b437f16fecbf1b9d2.js"></script></body> </html> 
diff --git a/docs/main.456429fc47dec0278d9d.js b/docs/main.456429fc47dec0278d9d.js
diff --git a/docs/main.803b437f16fecbf1b9d2.js b/docs/main.803b437f16fecbf1b9d2.js
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/editor",
-  "version": "0.9.50",
+  "version": "0.9.51",
   "description": "Fantastic Web Design Tool ",
   "main": "./dist/editor.js",
   "directories": {

diff --git a/src/assets/extension/manifest.json b/src/assets/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.9.50",
+  "version": "0.9.51",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool ",
   "author": "easylogic",

diff --git a/src/assets/whale/manifest.json b/src/assets/whale/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.9.50",
+  "version": "0.9.51",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool, Web 디자인 툴  ",
   "author": "easylogic",

diff --git a/src/csseditor/commands/playTimelineItem.js b/src/csseditor/commands/playTimelineItem.js
@@ -42,6 +42,13 @@ export default {
                     // artboard.setTimelineCurrentTime(0);
                     editor.changeMode('SELECTION');
                     editor.emit('afterChangeMode')
+                },
+                stop: (elapsed, timer) => {
+                    artboard.stop(timecode(timeline.fps, elapsed / 1000)) 
+                    editor.emit('stopTimeline');
+                    // artboard.setTimelineCurrentTime(0);
+                    editor.changeMode('SELECTION');
+                    editor.emit('afterChangeMode')
                 }
             })      
         })

diff --git a/src/editor/items/TimelineItem.js b/src/editor/items/TimelineItem.js
@@ -121,6 +121,7 @@ export class TimelineItem extends DomItem {
 
       var it = {
         layer,
+        layerElement,
         property: p.property,
         isOnlyTime: currentOffset.time === nextOffset.time,
         startTime: offset.time,
@@ -151,6 +152,29 @@ export class TimelineItem extends DomItem {
     }
   }
 
+  stop (frameOrCode) {
+    var timeline = this.getSelectedTimeline();
+
+    if (timeline) {
+
+      var time = timeline.currentTime;
+
+      // 중간 멈추는 영역이 되면 
+      // 비디오의 플레이를 멈춘다.  다시 시작하면 그 시점에 다시 시작한다. 
+      this.searchTimelineOffset(time).forEach(it => {
+        // play 속성 (video, audio) , 원하는 구간을 play 하고 멈춘다. 
+        if (it.property === 'playTime') {   // 멈춘다. 
+          const $video = it.layerElement.$('video');
+          if ($video) {
+            $video.el.pause();
+          }
+        }
+
+      });
+
+    }
+  }
+
   seek (frameOrCode, filterFunction = (it => it)) {
 
     var timeline = this.getSelectedTimeline();

diff --git a/src/editor/util/interpolate-functions/makeInterpolatePlayTime.js b/src/editor/util/interpolate-functions/makeInterpolatePlayTime.js
@@ -27,6 +27,10 @@ export function makeInterpolatePlayTime(layer, property, startValue, endValue, a
                 currentTime: mediaElement.currentTime,
             })            
             mediaElement.pause();
+        } else {
+            if (mediaElement.paused) {
+                mediaElement.play(); 
+            }
         }
     }
 }
diff --git a/src/util/functions/time.js b/src/util/functions/time.js
@@ -164,14 +164,15 @@ export function makeTimer (opt) {
         if (isFunction(opt.end)) timer.endCallback = opt.end;
         if (isFunction(opt.first)) timer.firstCallback = opt.first;
         if (isFunction(opt.last)) timer.lastCallback = opt.last;
+        if (isFunction(opt.stop)) timer.stopCallback = opt.stop;
 
         timer.firstCallback(timer.elapsed, timer);
         frameStart();
     }
 
 
     const stop = () => {
-        // console.table(timer.log);
+        timer.stopCallback(timer.elapsed, timer);
         cancelAnimationFrame(timer.id);
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d515be01f10bb5a2f1e3.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.456429fc47dec0278d9d.js"></script></body> </html>
		<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d515be01f10bb5a2f1e3.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.803b437f16fecbf1b9d2.js"></script></body> </html>