Publication on Hook step 2
This commit is contained in:
parent
543b9102ad
commit
03577c5938
4 changed files with 24 additions and 54 deletions
|
@ -23,57 +23,23 @@
|
||||||
<Step2 v-if="activeStep == 2"></Step2>
|
<Step2 v-if="activeStep == 2"></Step2>
|
||||||
<Step3 v-if="activeStep == 3"></Step3>
|
<Step3 v-if="activeStep == 3"></Step3>
|
||||||
|
|
||||||
<aside class="modal" v-model="uploadDialog" v-if="uploadDialog !== false">
|
|
||||||
<div class="modal-wrap">
|
|
||||||
<template v-if="confirmed">
|
|
||||||
<h3>Your image has been published!</h3>
|
|
||||||
<p>Check out your content on <a v-bind:href="`https://explorer.lbry.io/tx/${txhash}`" target="_blank" rel="noopener noreferrer">the LBRY blockchain explorer</a>.</p>
|
|
||||||
<a href="#" class="__button-black" style="display: inline-block;" v-on:click.prevent="uploadDialog = false">Dismiss this dialog</a>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<h3><span class="loader tiny" style="display: inline-block;"></span> Waiting for confirmation...</h3>
|
|
||||||
<p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import EventBus from "../event-bus";
|
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
import EventBus from "../event-bus";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
activeStep: 1,
|
activeStep: 1
|
||||||
confirmed: false,
|
|
||||||
txhash: "",
|
|
||||||
uploadDialog: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
uploadDialog: function () {
|
|
||||||
const component = this;
|
|
||||||
|
|
||||||
if (this.uploadDialog) {
|
|
||||||
setTimeout(() => {
|
|
||||||
component.confirmed = true; // Simulate confirmation
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created () {
|
created () {
|
||||||
const component = this;
|
const component = this;
|
||||||
|
|
||||||
EventBus.$on("HookFileUploaded", txhash => {
|
|
||||||
component.txhash = txhash;
|
|
||||||
component.uploadDialog = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
EventBus.$on("HookStepUpdate", step => {
|
EventBus.$on("HookStepUpdate", step => {
|
||||||
component.activeStep = step;
|
component.activeStep = step;
|
||||||
});
|
});
|
||||||
|
|
|
@ -104,7 +104,7 @@
|
||||||
component.isLoading = true;
|
component.isLoading = true;
|
||||||
component.exampleCode = `
|
component.exampleCode = `
|
||||||
# Example code using the daemon
|
# Example code using the daemon
|
||||||
curl "http://localhost:5279" --data "{ "method": "resolve", "params": { "uri": "${this.address}" } }"
|
curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '${this.address}' } }"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
component.$http.post("https://lbry.tech/forward", {
|
component.$http.post("https://lbry.tech/forward", {
|
||||||
|
|
|
@ -46,15 +46,15 @@
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-language">Language</label>
|
<label for="meme-language">Language</label>
|
||||||
<select name="meme-language" id="meme-language" v-model="language">
|
<select name="meme-language" id="meme-language" v-model="language">
|
||||||
<option value="AR">Arabic</option>
|
<option value="ar">Arabic</option>
|
||||||
<option value="ZH">Chinese (Mandarin)</option>
|
<option value="zh">Chinese (Mandarin)</option>
|
||||||
<option value="EN">English</option>
|
<option value="en">English</option>
|
||||||
<option value="FR">French</option>
|
<option value="fr">French</option>
|
||||||
<option value="DE">German</option>
|
<option value="de">German</option>
|
||||||
<option value="IT">Italian</option>
|
<option value="it">Italian</option>
|
||||||
<option value="JP">Japanese</option>
|
<option value="jp">Japanese</option>
|
||||||
<option value="RU">Russian</option>
|
<option value="ru">Russian</option>
|
||||||
<option value="ES">Spanish</option>
|
<option value="es">Spanish</option>
|
||||||
<option value="">Not specified</option>
|
<option value="">Not specified</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
@ -88,7 +88,10 @@
|
||||||
<div class="loader" v-if="isLoading"></div>
|
<div class="loader" v-if="isLoading"></div>
|
||||||
|
|
||||||
<div v-if="jsonData">
|
<div v-if="jsonData">
|
||||||
<p style="text-align: center;">Success! Here is the response:</p>
|
<p style="text-align: center;">Success!<br/>
|
||||||
|
<a class="__button-black" v-bind:href="'http://explorer.lbry.io/tx/'+txid">See the transaction on explorer.lbry.io</a>
|
||||||
|
</p>
|
||||||
|
<p style="text-align: center;">Here is the raw response:</p>
|
||||||
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -96,7 +99,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import EventBus from "../event-bus";
|
|
||||||
import hljs from "highlight.js";
|
import hljs from "highlight.js";
|
||||||
import imagesLoaded from "vue-images-loaded";
|
import imagesLoaded from "vue-images-loaded";
|
||||||
|
|
||||||
|
@ -129,7 +131,7 @@
|
||||||
images: images,
|
images: images,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
jsonData: "",
|
jsonData: "",
|
||||||
language: "EN",
|
language: "en",
|
||||||
license: "Public Domain",
|
license: "Public Domain",
|
||||||
loadingMessage: "",
|
loadingMessage: "",
|
||||||
nsfw: false,
|
nsfw: false,
|
||||||
|
@ -139,6 +141,7 @@
|
||||||
title: "",
|
title: "",
|
||||||
topLine: "This is an example meme",
|
topLine: "This is an example meme",
|
||||||
valid: false,
|
valid: false,
|
||||||
|
txid: ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -177,7 +180,7 @@
|
||||||
|
|
||||||
component.exampleCode = `
|
component.exampleCode = `
|
||||||
# Example code using the daemon
|
# Example code using the daemon
|
||||||
curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name": "${component.title}", "bid": 0.001, "file_path": "/path/to/your/file.jpg", "title": "${component.title}", "description": "${component.description}", "language": "${component.language}", "license": "${component.license}", "nsfw": "${component.nsfw}" } }"
|
curl "http://localhost:5279" --data "{ 'method': 'publish', 'params': { 'name': '${component.title}', 'bid': 0.001, 'file_path': '/path/to/your/file.jpg', 'title': '${component.title}', 'description': '${component.description}', 'language': '${component.language}', 'license': '${component.license}', 'nsfw': '${component.nsfw}' } }"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
component.$http.post("https://lbry.tech/upload-image", document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), {
|
component.$http.post("https://lbry.tech/upload-image", document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6), {
|
||||||
|
@ -185,7 +188,8 @@ curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name":
|
||||||
"Content-Type": "text/plain"
|
"Content-Type": "text/plain"
|
||||||
}
|
}
|
||||||
}).then(uploadResponse => {
|
}).then(uploadResponse => {
|
||||||
if (uploadResponse.status === "error") {
|
|
||||||
|
if (uploadResponse.body.status === "error") {
|
||||||
component.isLoading = false;
|
component.isLoading = false;
|
||||||
component.exampleCode = "";
|
component.exampleCode = "";
|
||||||
return;
|
return;
|
||||||
|
@ -194,7 +198,7 @@ curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name":
|
||||||
component.$http.post("https://lbry.tech/forward", {
|
component.$http.post("https://lbry.tech/forward", {
|
||||||
bid: 0.001,
|
bid: 0.001,
|
||||||
description: component.description,
|
description: component.description,
|
||||||
file_path: uploadResponse.filename,
|
file_path: uploadResponse.body.filename,
|
||||||
language: component.language,
|
language: component.language,
|
||||||
license: component.license,
|
license: component.license,
|
||||||
method: "publish",
|
method: "publish",
|
||||||
|
@ -204,7 +208,7 @@ curl "http://localhost:5279" --data "{ "method": "publish", "params": { "name":
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
component.isLoading = false;
|
component.isLoading = false;
|
||||||
component.jsonData = JSON.stringify(response.body, null, " ");
|
component.jsonData = JSON.stringify(response.body, null, " ");
|
||||||
EventBus.$emit("HookFileUploaded", response.body.txid);
|
component.txid = response.body.result.txid;
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
component.isLoading = false;
|
component.isLoading = false;
|
||||||
component.jsonData = JSON.stringify(error, null, " ");
|
component.jsonData = JSON.stringify(error, null, " ");
|
||||||
|
|
|
@ -102,7 +102,7 @@
|
||||||
|
|
||||||
component.exampleCode = `
|
component.exampleCode = `
|
||||||
# Example code using the daemon
|
# Example code using the daemon
|
||||||
curl "http://localhost:5279" --data "{ "method": "wallet_send", "params": { "claim_id": "${this.address}", "amount": "${this.amount}" } }"
|
curl "http://localhost:5279" --data "{ 'method': 'wallet_send', 'params': { 'claim_id': '${this.address}', 'amount': '${this.amount}' } }"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
component.$http.post("https://lbry.tech/forward", {
|
component.$http.post("https://lbry.tech/forward", {
|
||||||
|
|
Loading…
Reference in a new issue