Skip to content

Commit

Permalink
Merge pull request #2 from lnbits/trollbox
Browse files Browse the repository at this point in the history
Adds trollbox
  • Loading branch information
arcbtc authored Feb 5, 2023
2 parents 2f88821 + 4d4cdf0 commit 00c238c
Show file tree
Hide file tree
Showing 8 changed files with 307 additions and 49 deletions.
9 changes: 0 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
# StreamerCopilot

Tool to help streamers accept sats for tips

<a href="https://www.youtube.com/watch?v=w5TmWWj2nZY">Video tutorial</a>

![image](https://user-images.githubusercontent.com/33088785/214897589-e51e4948-d6cf-4c3b-a0ee-b4581e873b6c.png)

![image](https://user-images.githubusercontent.com/33088785/214898501-193c0f04-9738-4039-b178-ea0068a61685.png)



9 changes: 1 addition & 8 deletions config.json
Original file line number Diff line number Diff line change
@@ -1,8 +1 @@
{
"name": "Streamer Copilot",
"short_description": "Video tips/animations/webhooks",
"tile": "/copilot/static/bitcoin-streaming.png",
"contributors": [
"arcbtc"
]
}
{"name": "Streamer Copilot", "short_description": "Video tips/animations/webhooks", "tile": "/copilot/static/bitcoin-streaming.png", "contributors": ["arcbtc"], "is_installed": true}
2 changes: 1 addition & 1 deletion migrations.py
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,4 @@ async def m003_fix_data_types(db):

await db.execute(
"INSERT INTO copilot.newer_copilots SELECT * FROM copilot.copilots"
)
)
117 changes: 117 additions & 0 deletions templates/copilot/chat.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
{% extends "public.html" %} {% block page %}
<q-page>
<div class="row q-col-gutter-md justify-center">
<div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
<q-card class="q-pa-lg">
<q-card-section>
<q-form @submit="sendMessage" class="full-width chat-input">
<q-input
ref="newMessage"
v-model="newMessage"
placeholder="Message"
class="full-width"
dense
outlined
maxlength="100"
>
<template>
<q-btn
round
dense
flat
type="submit"
icon="send"
color="primary"
/>
</template>
</q-input>
</q-form>
</q-card-section>
</q-card>
</div>
</div>
{% for comment in trollbox %} {{ comment }} {% endfor %}
<q-dialog
v-model="pers"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 300px">
<q-card-section>
<q-input label="Name" maxlength="10" v-model="name"></q-input>
</q-card-section>
<q-card-section class="q-pt-none">
<q-btn v-close-popup color="primary" label="lanch chat"></q-btn>
</q-card-section>
</q-card>
</q-dialog>
</q-page>
{% endblock %} {% block scripts %}
<script>
new Vue({
el: '#vue',
mixins: [windowMixin],
data: function () {
return {
name: '',
newMessage: '',
trollbox: [],
pers: true
}
},
methods: {
sendMessage: function (message) {
self = this
LNbits.api
.request(
'GET',
'/api/v1/ws/{{chat_id}}/' + this.name + '-' + this.newMessage
)
.then(function (response1) {
self.newMessage = ''
self.$q.notify({
color: 'green',
message: 'Sent!'
})
})
.catch(err => {
LNbits.utils.notifyApiError(err)
})
},
initTrollBox() {
self = this
self.troll_box = !self.troll_box
console.log(self.troll_box)

if (location.protocol !== 'http:') {
self.chatUrl =
'wss:https://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
self.chat_id
} else {
self.chatUrl =
'ws:https://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
self.chat_id
}
this.connectionchat = new WebSocket(self.chatUrl)
this.connectionchat.onmessage = function (e) {
this.trollbox.push(e.data)
}
this.connectionchat.onopen = () => this.launch
}
},
created: function () {
self = this
self.initTrollBox()
}
})
</script>
{% endblock %}
116 changes: 115 additions & 1 deletion templates/copilot/compose.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,58 @@
></video>
<img src="" style="width: 100%" id="animations" class="fixed-bottom-left" />

<q-card
id="draggabletroll"
v-show="troll_box"
class="rounded-borders bg-dark"
style="width: 350px; height: 500px; margin-top: 10%; float: right"
>
<q-card-section>
{% raw %}
<div class="row">
<div class="col" style="max-width: 100px">
<qrcode
:value="chatUrl"
:options="{width:100}"
class="rounded-borders"
></qrcode>
</div>
<div class="col">
<div class="text-h6 q-ml-md">Trollbox</div>
<a
:href="chatLink"
class="text-white"
style="color: #43a047"
target="_blank"
><p class="q-ml-md">{{chatLink}}</p></a
>
</div>
</div>
</q-card-section>

<q-separator dark inset></q-separator>

<q-card-actions>
<div
class="absolute-bottom q-ml-md q-mb-xs"
style="
max-height: 360px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
"
>
<p
v-for="troll in chatCompute"
style="margin-bottom: 5px; word-wrap: break-word"
>
{{troll}}
</p>
{% endraw %}
</div>
</q-card-actions>
</q-card>

<div
v-if="copilot.lnurl_toggle == 1"
id="draggableqr"
Expand Down Expand Up @@ -86,6 +138,14 @@
height: 60px;
cursor: grab;
}
#draggabletroll {
width: 300px;
height: 300px;
cursor: grab;
}
#videoCamera {
cursor: grab;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
Expand All @@ -103,7 +163,17 @@
copilot: {},
animQueue: [],
queue: false,
lnurl: ''
lnurl: '',
troll_box: false,
trollbox: [],
chatUrl: '',
chat_id: '',
chatLink: ''
}
},
computed: {
chatCompute: function () {
return self.trollbox
}
},
methods: {
Expand Down Expand Up @@ -147,6 +217,40 @@
console.log('Something went wrong!')
})
},
initTrollBox() {
self = this
self.troll_box = !self.troll_box
if (location.protocol !== 'http:') {
self.chatUrl =
'wss:https://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
self.chat_id
} else {
self.chatUrl =
'ws:https://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
self.chat_id
}
this.connectionchat = new WebSocket(self.chatUrl)
this.connectionchat.onmessage = function (e) {
res = e.data.split('-')
if (res[0].length < 1 || res[1].length < 1) {
return
}
comment = res[0].toUpperCase() + ': ' + res[1]
if (self.trollbox.length > 50) {
self.trollbox.pop()
}
self.trollbox.unshift(comment)
}
this.connectionchat.onopen = () => this.launch
},
pushAnim(content) {
document.getElementById('animations').style.width = content[0]
document.getElementById('animations').src = content[1]
Expand Down Expand Up @@ -184,6 +288,8 @@
$(function () {
$('#draggableqr').draggable()
$('#draggableprice').draggable()
$('#draggabletroll').draggable()
$('#videoCamera').draggable()
}),
(self = this)
self.copilot = JSON.parse(localStorage.getItem('copilot'))
Expand Down Expand Up @@ -289,6 +395,14 @@
if (res[0] == 'rick') {
addTask(['40%', '/copilot/static/rick.gif', res[1]])
}
if (res[0] == 'trollbox') {
self.chat_id = res[1]
self.chatLink = '/copilot/chat/' + self.chat_id
self.initTrollBox()
}
if (res[0] == 'trollboxchat') {
this.trollbox.push(res[1])
}
if (res[0] == 'true') {
document.getElementById('videoCamera').style.width = '20%'
self.initScreenShare()
Expand Down
67 changes: 38 additions & 29 deletions templates/copilot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -160,19 +160,47 @@ <h6 class="text-subtitle1 q-my-none">
label="Title"
></q-input>
<div class="row">
<q-checkbox
v-model="formDialogCopilot.data.lnurl_toggle"
label="Include lnurl payment QR? (requires https)"
left-label
></q-checkbox>
<div class="col">
<div class="q-gutter-sm">
<q-select
filled
dense
style="width: 50%"
v-model.trim="formDialogCopilot.data.show_price"
:options="currencyOptions"
label="Show price"
/>
</div>
</div>
</div>

<div class="row">
<div class="col">
<q-checkbox
v-model="formDialogCopilot.data.lnurl_toggle"
label="Tip QR code"
></q-checkbox>
</div>
<div class="col">
<div class="q-gutter-sm">
<div class="row">
<q-checkbox
v-model="formDialogCopilot.data.show_ack"
label="Show 'powered by LNbits'"
></q-checkbox>
</div>
</div>
</div>
</div>

<div v-if="formDialogCopilot.data.lnurl_toggle">
<q-checkbox
v-model="formDialogCopilot.data.show_message"
left-label
label="Show lnurl-pay messages? (supported by few wallets)"
></q-checkbox>
<q-separator class="q-mb-md"></q-separator>
<div class="text-subtitle1">(LNURL-pay requires https)</div>
<q-checkbox v-model="formDialogCopilot.data.show_message"
><q-tolltip
>LNURL messages (supported by a few wallets)</q-tolltip
></q-checkbox
>

<q-select
filled
Expand Down Expand Up @@ -338,25 +366,6 @@ <h6 class="text-subtitle1 q-my-none">
</q-input>
</div>

<div class="q-gutter-sm">
<q-select
filled
dense
style="width: 50%"
v-model.trim="formDialogCopilot.data.show_price"
:options="currencyOptions"
label="Show price"
/>
</div>
<div class="q-gutter-sm">
<div class="row">
<q-checkbox
v-model="formDialogCopilot.data.show_ack"
left-label
label="Show 'powered by LNbits'"
></q-checkbox>
</div>
</div>
<div class="row q-mt-lg">
<q-btn
v-if="formDialogCopilot.data.id"
Expand Down
Loading

0 comments on commit 00c238c

Please sign in to comment.