Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pag-Composition class bindings method in web #111

Merged
merged 7 commits into from
Feb 15, 2022
Merged

Add pag-Composition class bindings method in web #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
836d1ba
Merge pull request #1 from Tencent/main
renzhilan Feb 15, 2022
e15e87a
Add pagposition class binding method and audio play dome
Feb 15, 2022
725d30d
fix: Remove asynchronous function
Feb 15, 2022
d687d08
fix:Remove asynchronous function
Feb 15, 2022
8977fb6
Fix audioPlayer class
Feb 15, 2022
360a5b1
Remove Log.log() function
Feb 15, 2022
e691e36
Fix adjust annotation
Feb 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions web/demo/index.css
View file
Open in desktop
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
Open in desktop
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