Skip to content

Commit

Permalink
Add pag-Composition class bindings method in web (#111)
Browse files Browse the repository at this point in the history 
* Add pagposition class binding method and audio play dome

* fix: Remove asynchronous function

* fix:Remove asynchronous function

* Fix audioPlayer class

* Remove Log.log() function

* Fix adjust annotation

Co-authored-by: 任志强 <[email protected]>
  • Loading branch information
@renzhilan
renzhilan and 任志强 authored Feb 15, 2022
1 parent 62c9f0c commit 82a9569
Show file tree
Hide file tree
Showing 8 changed files with 514 additions and 70 deletions.
97 changes: 97 additions & 0 deletions web/demo/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,100 @@ button {
input {
font-size: 16px;
}

.ac-container {
margin: 10px auto 30px auto;
}

.ac-container label {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover {
background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover {
background: #0252d9;
color: white;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJDQjg3QjIzNUEwQTExRTFCMzhGODE4MEUyMzVCOUExIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJDQjg3QjI0NUEwQTExRTFCMzhGODE4MEUyMzVCOUExIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkNCODdCMjE1QTBBMTFFMUIzOEY4MTgwRTIzNUI5QTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCODdCMjI1QTBBMTFFMUIzOEY4MTgwRTIzNUI5QTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5cTChyAAAAsUlEQVR42mJcduA0AxBkAvEOIL7PgBuwAXE1EHcA8XcmIFEBxNOA+DAQq+DRtBqI64B4CxBzgjS6QiWlgfgAEKtj0bQOiP2gfF0gVgRp9AHifUia9yJpBmnaCMTeUP5rIHYG4msgjd+xaAbZbADV5IGkyQGIL4M4TFBBmObdUL4EEJ9H0vQCqukazP1MSH4BafZH0syApMkZWRO6RmTNO/BpwqYRpjkIiBegOw8ZAAQYAErPJ/hwLstPAAAAAElFTkSuQmCC) no-repeat center center;
}

.ac-container input:checked + label:hover:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxMjY0NjgzNUEwQTExRTFBMkMwQUUyOEY2NjkzRDMyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxMjY0Njg0NUEwQTExRTFBMkMwQUUyOEY2NjkzRDMyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjEyNjQ2ODE1QTBBMTFFMUEyQzBBRTI4RjY2OTNEMzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjEyNjQ2ODI1QTBBMTFFMUEyQzBBRTI4RjY2OTNEMzIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4kGTYVAAAAlklEQVR42mJcduA0AxbACcTTgLgDiG9iU8CEQ9M6IE4A4gNArEWMRpCmjUDsAeVLAPFebJqZsGhyRVODVTMTkqYtSJpeALEhEO9A0ozibCYkTU5QsadA7ADEF4DYH0mzKFSzLkwjuiZnpJD8hUUz2NkgjbtxaGJA07wVyr8GxPdZoHH1BWrqHQbsAKQ5CIiroeq/AwQYALFQJdCqpXTVAAAAAElFTkSuQmCC);
}

.ac-container .ac-check {
display: none;
}

.ac-container article {
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.support-method .title{
font-size: 18px;
color: black;
font-weight: 600;
margin-bottom: 10px;
}

.ac-container input:checked ~ article.ac-large {
height: auto;
padding: 25px;
padding-top: 8px;
}
152 changes: 89 additions & 63 deletions web/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<div>
<canvas class="canvas" id="pag" width="640" height="640"></canvas>
<div class="tablecloth" id="tablecloth"></div>
<div id = "editLayer-content"></div>
</div>
<div class="ml-24">
<div class="mt-24">
Expand All @@ -29,69 +30,94 @@
<input id="upload-pag" type="file" style="display: none" accept=".pag" />
</div>
<section id="control" style="display: none">
<h2>PAGView:</h2>
<div class="mt-24">
<button id="btn-play">播放</button>
<button id="btn-pause">暂停</button>
<button id="btn-stop">停止</button>
<button id="btn-destroy">销毁</button>
</div>
<div class="mt-24">
设置次数
<input id="repeatCount" type="number" value="0" />
<button id="setRepeatCount">设置</button>
</div>
<div class="mt-24">
<button id="btn-maxFrameRate">获取最大帧率</button>
设置最大帧率
<input id="maxFrameRate" type="number" value="0" />
<button id="setMaxFrameRate">设置</button>
</div>
<div class="mt-24">
<button class="mt-24" id="btn-scaleMode">获取缩放模式</button>
缩放模式
<select id="scaleMode">
<option value="0">None</option>
<option value="1">Stretch</option>
<option value="2" selected>LetterBox</option>
<option value="3">Zoom</option>
</select>
<button id="setScaleMode" class="mt-24">设置</button>
</div>
<div class="mt-24">
<button id="btn-getProgress">获取进度</button>
设置进度
<input id="progress" type="number" value="0" />
<button id="setProgress">跳转</button>
</div>
<button class="mt-24" id="btn-videoEnabled">VideoEnabled status</button>
<button class="mt-24" id="btn-setVideoEnabled">Set videoEnabled</button>
<button class="mt-24" id="btn-cacheEnabled">CacheEnabled status</button>
<button class="mt-24" id="btn-setCacheEnabled">Set cacheEnabled</button>
<!-- <button class="mt-24" id="btn-freeCache">FreeCache</button> -->
<div class="mt-24">
<button id="btn-cacheScale">CacheScale status</button>
CacheScale
<input id="cacheScale" type="number" value="1" />
<button id="btn-setCacheScale">Set cacheScale</button>
</div>
<h2>PAGFile:</h2>
<div class="mt-24">
<button id="btn-pagfile-get-duration">Get duration</button>
PAGFile duration
<input id="input-pagfile-duration" type="number" value="0" />
<button id="btn-pagfile-set-duration">setDuration</button>
</div>
<div class="mt-24">
<button id="btn-pagfile-time-stretch-mode">Get timeStretchMode</button>
timeStretchMode
<select id="select-time-stretch-mode">
<option value="0">None</option>
<option value="1">Scale</option>
<option value="2" selected>Repeat</option>
<option value="3">RepeatInverted</option>
</select>
<button id="btn-pagfile-set-time-stretch-mode">setTimeStretchMode</button>
<div class="container-1">
<section class="ac-container">
<div>
<input class="ac-check" id="ac-1" name="accordion-1" type="checkbox" checked />
<label for="ac-1">PAGView </label>
<article class="ac-large">
<div class="mt-24">
<button id="btn-play">播放</button>
<button id="btn-pause">暂停</button>
<button id="btn-stop">停止</button>
<button id="btn-destroy">销毁</button>
</div>
<div class="mt-24">
设置次数
<input id="repeatCount" type="number" value="0" />
<button id="setRepeatCount">设置</button>
</div>
<div class="mt-24">
<button id="btn-maxFrameRate">获取最大帧率</button>
设置最大帧率
<input id="maxFrameRate" type="number" value="0" />
<button id="setMaxFrameRate">设置</button>
</div>
<div class="mt-24">
<button class="mt-24" id="btn-scaleMode">获取缩放模式</button>
缩放模式
<select id="scaleMode">
<option value="0">None</option>
<option value="1">Stretch</option>
<option value="2" selected>LetterBox</option>
<option value="3">Zoom</option>
</select>
<button id="setScaleMode" class="mt-24">设置</button>
</div>
<div class="mt-24">
<button id="btn-getProgress">获取进度</button>
设置进度
<input id="progress" type="number" value="0" />
<button id="setProgress">跳转</button>
</div>
<button class="mt-24" id="btn-videoEnabled">VideoEnabled status</button>
<button class="mt-24" id="btn-setVideoEnabled">Set videoEnabled</button>
<button class="mt-24" id="btn-cacheEnabled">CacheEnabled status</button>
<button class="mt-24" id="btn-setCacheEnabled">Set cacheEnabled</button>
<!-- <button class="mt-24" id="btn-freeCache">FreeCache</button> -->
<div class="mt-24">
<button id="btn-cacheScale">CacheScale status</button>
CacheScale
<input id="cacheScale" type="number" value="1" />
<button id="btn-setCacheScale">Set cacheScale</button>
</div>
</article>
</div>
<div>
<input class="ac-check" id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">PAGFile</label>
<article class="ac-large">
<div class="mt-24">
<button id="btn-pagfile-get-duration">Get duration</button>
PAGFile duration
<input id="input-pagfile-duration" type="number" value="0" />
<button id="btn-pagfile-set-duration">setDuration</button>
</div>
<div class="mt-24">
<button id="btn-pagfile-time-stretch-mode">Get timeStretchMode</button>
timeStretchMode
<select id="select-time-stretch-mode">
<option value="0">None</option>
<option value="1">Scale</option>
<option value="2" selected>Repeat</option>
<option value="3">RepeatInverted</option>
</select>
<button id="btn-pagfile-set-time-stretch-mode">setTimeStretchMode</button>
</div>
</article>
</div>
<div>
<input class="ac-check" id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">PAGComposition</label>
<article class="ac-large">
<div class="support-method">
<div class="title"> pag-wasm-bindings-method: </div>
width, height, setContentSize, numChildren, getLayerAt, getLayerIndex, swapLayerAt, contains, audioStartTime, audioMarkers, audioMarkers, removeLayerAt, removeAllLayers, addLayer, addLayerAt, getLayersByName, getLayersUnderPoint
</div>
<button class="mt-24" id="btn-composition">Test API</button>
</article>
</div>
</section>
</div>
</section>
</div>
Expand Down
Loading

0 comments on commit 82a9569

Please sign in to comment.