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

Testing out qa --> full editor workflow #122

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Testing out qa --> full editor workflow #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion v3-sample/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2 class="spectrum-Heading spectrum-Heading--sizeXL"> Quick actions</h2>

(async () => {
const ccEverywhere = await window.CCEverywhere.initialize({
clientId: 'your-client-id',
clientId: '4288d0d499f64c4fa6626fd91d9f1779',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is a miss or if it's intentional.

appName: 'Partner Days Embed SDK Demo',
});

Expand Down
101 changes: 98 additions & 3 deletions v3-sample/quickactions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
<button id="reset">Reset</button><p></p>
<p class="spectrum-Body spectrum-Body--sizeL">If a file is selected, it will continue to be used as an input until you click <b>Reset</b>.</p>
<hr class="solid">

<h2 class="spectrum-Heading spectrum-Heading--sizeXL"> Image quick actions </h2>
<div id="image-buttons">
<button id="crop-image" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Crop Image</span>
Expand All @@ -54,17 +56,46 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
<button id="remove-background" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Remove Background</span>
</button>
<button id="convert-to-gif" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Convert to GIF</span>
</button>
<button id="clear" class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Hide</span>
</button>
</div>

<h2 class="spectrum-Heading spectrum-Heading--sizeXL"> Video quick actions </h2>
<div id="video-qa">
<button id="resize-video" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Resize video</span>
</button>
<button id="animate-from-audio" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Animate from audio</span>
</button>
<button id="merge-videos" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Merge videos</span>
</button>
<button id="crop-video" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Crop video</span>
</button>
<!-- <button id="remove-background" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Remove Background</span>
</button>
<button id="convert-to-gif" class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Convert to GIF</span>
</button>
<button id="clear" class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeL" >
<span class="spectrum-Button-label">Hide</span>
</button> -->
</div>

<img id="image-container" style="visibility:hidden;"/>
</div>
<script src="https://sdk.cc-embed.adobe.com/v3/CCEverywhere.js"></script>
<script type="text/javascript" >
(async () => {
const ccEverywhere = await window.CCEverywhere.initialize({
clientId: 'your-client-id',
clientId: '4288d0d499f64c4fa6626fd91d9f1779',
appName: 'Partner Days Embed SDK Demo'
});

Expand Down Expand Up @@ -95,7 +126,7 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
/* If label is not specified, this native button renders label "Open in Adobe Express" */
{
target: 'Editor',
id: 'edit-in-express',
id: 'editor',
buttonType: 'native',
variant: 'primary',
optionType: 'button',
Expand All @@ -115,14 +146,42 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
label: 'Save image',
optionType: 'button',
buttonType: 'custom'
}
];

const videoExportOptions = [
/* If label is not specified, this native button renders label "Open in Adobe Express" */
{
target: 'Editor',
id: 'editor',
buttonType: 'native',
variant: 'primary',
optionType: 'button',
label: 'Customize'
},
/* If label is not specified, this native button renders label "Download" */
{
target: 'Download',
id: 'download-button',
variant: 'cta',
optionType: 'button',
buttonType: 'native'
},
{
target: 'Host',
id: 'open_in_new_tab',
label: "Open in new tab",
variant: 'accent',
optionType: 'button',
buttonType: 'custom'
},
];

const imageCallbacks = {
onCancel: () => {},
onPublish: (publishParams) => {
const localData = { asset: publishParams.asset[0].data}
console.log("Published asset", publishParams)

if(publishParams.exportButtonId=="save-modified-asset"){
appImage.src = localData.asset;
appImage.style.visibility="visible";
Expand All @@ -133,6 +192,26 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
}
}

const videoCallbacks = {
onCancel: () => {},
onPublish: (publishParams) => {

const { exportButtonId, asset } = publishParams;

if (exportButtonId === 'editor') {
console.log("amanda", publishParams)
window.open(publishParams.targetInfo.url, '_blank');
}

if (exportButtonId === 'open_in_new_tab') {
window.open(asset[0].data, '_blank');
}
},
onError: (err) => {
console.error('Error received is', err.toString())
}
}

const openQAwithAsset = (qa_id) => {
ccEverywhere.openQuickAction({
id: qa_id,
Expand Down Expand Up @@ -160,6 +239,15 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
}
};

function videoQuickAction(qa_id) {
ccEverywhere.openQuickAction({
id: qa_id,
inputParams: { exportOptions: videoExportOptions },
callbacks: videoCallbacks
});
};


// Button event listeners

let imageButtons = document.querySelectorAll('#image-buttons button');
Expand All @@ -168,6 +256,13 @@ <h1 class="spectrum-Heading spectrum-Heading--sizeXXL"> Embed SDK: Quick actions
imageQuickAction(button.id)
})
})

let videoQAs = document.querySelectorAll('#video-qa button');
videoQAs.forEach((button) => {
button.addEventListener('click', () => {
videoQuickAction(button.id)
})
})

document.getElementById('clear').addEventListener('click', () => {
appImage.src=null;
Expand Down