Browse Source
Add support for sending gifs via Giphy
Add support for sending gifs via Giphy
Fixes #22 Closes #75 Co-authored-by: Nischay <hegdenischay@gmail.com>pull/63/merge
Tulir Asokan
7 months ago
15 changed files with 631 additions and 188 deletions
-
15.editorconfig
-
17sticker/lib/matrix.py
-
27web/index.html
-
8web/lib/htm/preact.js
-
2web/package.json
-
55web/res/giphy-dark.svg
-
54web/res/giphy-light.svg
-
BINweb/res/powered-by-giphy.png
-
107web/src/giphy.js
-
126web/src/index.js
-
8web/src/search-box.js
-
3web/src/widget-api.js
-
2web/style/index.css
-
21web/style/index.sass
-
374web/yarn.lock
@ -0,0 +1,15 @@ |
|||
root = true |
|||
|
|||
[*] |
|||
indent_style = tab |
|||
indent_size = 4 |
|||
end_of_line = lf |
|||
charset = utf-8 |
|||
trim_trailing_whitespace = true |
|||
insert_final_newline = true |
|||
|
|||
[*.{yaml,yml,sql,py,sass}] |
|||
indent_style = space |
|||
|
|||
[*.sass] |
|||
indent_size = 2 |
|||
@ -1,22 +1,23 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"> |
|||
<title>Maunium sticker picker</title> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"> |
|||
<title>Maunium sticker picker</title> |
|||
|
|||
<link rel="modulepreload" href="src/widget-api.js"/> |
|||
<link rel="modulepreload" href="src/frequently-used.js"/> |
|||
<link rel="modulepreload" href="src/spinner.js"/> |
|||
<link rel="modulepreload" href="lib/htm/preact.js"/> |
|||
<link rel="preload" href="packs/index.json" as="fetch" type="application/json" crossorigin/> |
|||
<link rel="modulepreload" href="src/widget-api.js"/> |
|||
<link rel="modulepreload" href="src/frequently-used.js"/> |
|||
<link rel="modulepreload" href="src/spinner.js"/> |
|||
<link rel="modulepreload" href="src/giphy.js"/> |
|||
<link rel="modulepreload" href="lib/htm/preact.js"/> |
|||
<link rel="preload" href="packs/index.json" as="fetch" type="application/json" crossorigin/> |
|||
|
|||
<link rel="stylesheet" href="style/index.css"/> |
|||
<link rel="stylesheet" href="style/spinner.css"/> |
|||
<script src="src/index.js" type="module"></script> |
|||
<script nomodule>document.body.innerText = "This sticker picker requires modern JavaScript"</script> |
|||
<link rel="stylesheet" href="style/index.css"/> |
|||
<link rel="stylesheet" href="style/spinner.css"/> |
|||
<script src="src/index.js" type="module"></script> |
|||
<script nomodule>document.body.innerText = "This sticker picker requires modern JavaScript"</script> |
|||
</head> |
|||
<body> |
|||
<noscript>This sticker picker requires JavaScript</noscript> |
|||
<noscript>This sticker picker requires JavaScript</noscript> |
|||
</body> |
|||
</html> |
|||
8
web/lib/htm/preact.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,55 @@ |
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
|||
<svg |
|||
height="534" |
|||
width="427.20001" |
|||
viewBox="0 0 27.990145 35" |
|||
version="1.1" |
|||
id="svg24" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
xmlns:svg="http://www.w3.org/2000/svg"> |
|||
<defs |
|||
id="defs28" /> |
|||
<g |
|||
fill="none" |
|||
fill-rule="evenodd" |
|||
id="g22" |
|||
transform="translate(-0.02883895)"> |
|||
<path |
|||
d="M 4,4 H 24 V 31 H 4 Z" |
|||
fill="#000000" |
|||
id="path2" |
|||
style="fill:#ffffff;fill-opacity:1" /> |
|||
<g |
|||
fill-rule="nonzero" |
|||
id="g16"> |
|||
<path |
|||
d="M 0,3 H 4 V 32 H 0 Z" |
|||
fill="#04ff8e" |
|||
id="path4" /> |
|||
<path |
|||
d="m 24,11 h 4 v 21 h -4 z" |
|||
fill="#8e2eff" |
|||
id="path6" /> |
|||
<path |
|||
d="m 0,31 h 28 v 4 H 0 Z" |
|||
fill="#00c5ff" |
|||
id="path8" /> |
|||
<path |
|||
d="M 0,0 H 16 V 4 H 0 Z" |
|||
fill="#fff152" |
|||
id="path10" /> |
|||
<path |
|||
d="M 24,8 V 4 H 20 V 0 H 16 V 12 H 28 V 8" |
|||
fill="#ff5b5b" |
|||
id="path12" /> |
|||
<path |
|||
d="m 24,16 v -4 h 4" |
|||
fill="#551c99" |
|||
id="path14" /> |
|||
</g> |
|||
<path |
|||
d="M 16,0 V 4 H 12" |
|||
fill="#999131" |
|||
id="path18" /> |
|||
</g> |
|||
</svg> |
|||
@ -0,0 +1,54 @@ |
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
|||
<svg |
|||
height="534" |
|||
width="427.20001" |
|||
viewBox="0 0 27.990145 35" |
|||
version="1.1" |
|||
id="svg24" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
xmlns:svg="http://www.w3.org/2000/svg"> |
|||
<defs |
|||
id="defs28" /> |
|||
<g |
|||
fill="none" |
|||
fill-rule="evenodd" |
|||
id="g22" |
|||
transform="translate(-0.02883895)"> |
|||
<path |
|||
d="M 4,4 H 24 V 31 H 4 Z" |
|||
fill="#000000" |
|||
id="path2" /> |
|||
<g |
|||
fill-rule="nonzero" |
|||
id="g16"> |
|||
<path |
|||
d="M 0,3 H 4 V 32 H 0 Z" |
|||
fill="#04ff8e" |
|||
id="path4" /> |
|||
<path |
|||
d="m 24,11 h 4 v 21 h -4 z" |
|||
fill="#8e2eff" |
|||
id="path6" /> |
|||
<path |
|||
d="m 0,31 h 28 v 4 H 0 Z" |
|||
fill="#00c5ff" |
|||
id="path8" /> |
|||
<path |
|||
d="M 0,0 H 16 V 4 H 0 Z" |
|||
fill="#fff152" |
|||
id="path10" /> |
|||
<path |
|||
d="M 24,8 V 4 H 20 V 0 H 16 V 12 H 28 V 8" |
|||
fill="#ff5b5b" |
|||
id="path12" /> |
|||
<path |
|||
d="m 24,16 v -4 h 4" |
|||
fill="#551c99" |
|||
id="path14" /> |
|||
</g> |
|||
<path |
|||
d="M 16,0 V 4 H 12" |
|||
fill="#999131" |
|||
id="path18" /> |
|||
</g> |
|||
</svg> |
|||
|
After Width: 641 | Height: 136 | Size: 7.6 KiB |
@ -0,0 +1,107 @@ |
|||
import {Component, html} from "../lib/htm/preact.js"; |
|||
import * as widgetAPI from "./widget-api.js"; |
|||
import {SearchBox} from "./search-box.js"; |
|||
|
|||
const GIPHY_SEARCH_DEBOUNCE = 1000 |
|||
let GIPHY_API_KEY = "" |
|||
let GIPHY_MXC_PREFIX = "mxc://giphy.mau.dev/" |
|||
|
|||
export function giphyIsEnabled() { |
|||
return GIPHY_API_KEY !== "" |
|||
} |
|||
|
|||
export function setGiphyAPIKey(apiKey, mxcPrefix) { |
|||
GIPHY_API_KEY = apiKey |
|||
if (mxcPrefix) { |
|||
GIPHY_MXC_PREFIX = mxcPrefix |
|||
} |
|||
} |
|||
|
|||
export class GiphySearchTab extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
this.state = { |
|||
searchTerm: "", |
|||
gifs: [], |
|||
loading: false, |
|||
error: null, |
|||
} |
|||
this.handleGifClick = this.handleGifClick.bind(this) |
|||
this.searchKeyUp = this.searchKeyUp.bind(this) |
|||
this.updateGifSearchQuery = this.updateGifSearchQuery.bind(this) |
|||
this.searchTimeout = null |
|||
} |
|||
|
|||
async makeGifSearchRequest() { |
|||
try { |
|||
const resp = await fetch(`https://api.giphy.com/v1/gifs/search?q=${this.state.searchTerm}&api_key=${GIPHY_API_KEY}`) |
|||
// TODO handle error responses properly?
|
|||
const data = await resp.json() |
|||
if (data.data.length === 0) { |
|||
this.setState({gifs: [], error: "No results"}) |
|||
} else { |
|||
this.setState({gifs: data.data, error: null}) |
|||
} |
|||
} catch (error) { |
|||
this.setState({error}) |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
clearTimeout(this.searchTimeout) |
|||
} |
|||
|
|||
searchKeyUp(event) { |
|||
if (event.key === "Enter") { |
|||
clearTimeout(this.searchTimeout) |
|||
this.makeGifSearchRequest() |
|||
} |
|||
} |
|||
|
|||
updateGifSearchQuery(event) { |
|||
this.setState({searchTerm: event.target.value}) |
|||
clearTimeout(this.searchTimeout) |
|||
this.searchTimeout = setTimeout(() => this.makeGifSearchRequest(), GIPHY_SEARCH_DEBOUNCE) |
|||
} |
|||
|
|||
handleGifClick(gif) { |
|||
widgetAPI.sendSticker({ |
|||
"body": gif.title, |
|||
"info": { |
|||
"h": gif.images.original.height, |
|||
"w": gif.images.original.width, |
|||
"size": gif.images.original.size, |
|||
"mimetype": "image/webp", |
|||
}, |
|||
"msgtype": "m.image", |
|||
"url": GIPHY_MXC_PREFIX + gif.id, |
|||
|
|||
"id": gif.id, |
|||
"filename": gif.id + ".webp", |
|||
}) |
|||
} |
|||
|
|||
render() { |
|||
// TODO display loading state?
|
|||
return html`
|
|||
<${SearchBox} onInput=${this.updateGifSearchQuery} onKeyUp=${this.searchKeyUp} value=${this.state.searchTerm} placeholder="Find GIFs"/> |
|||
<div class="pack-list"> |
|||
<section class="stickerpack" id="pack-giphy"> |
|||
<div class="error"> |
|||
${this.state.error} |
|||
</div> |
|||
<div class="sticker-list"> |
|||
${this.state.gifs.map((gif) => html`
|
|||
<div class="sticker" onClick=${() => this.handleGifClick(gif)} data-gif-id=${gif.id}> |
|||
<img src=${gif.images.fixed_height.url} alt=${gif.title} class="visible" data=/> |
|||
</div> |
|||
`)}
|
|||
</div> |
|||
<div class="footer powered-by-giphy"> |
|||
<img src="./res/powered-by-giphy.png" alt="Powered by GIPHY"/> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
`
|
|||
} |
|||
} |
|||
@ -1 +1 @@ |
|||
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:#fff}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:#000}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}.icon.icon.icon-search{--icon-image: url(../res/search.svg)}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid transparent}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(calc(12vw + 2px) + calc(2 * 0.7rem + 2 * 0.5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.search-box{position:relative;display:flex}div.search-box>input[type=text]{flex-grow:1;background-color:var(--search-box-color);outline:none;border:none;border-radius:.25rem;height:1rem;padding:.7rem;padding-right:calc(1rem + 0.7rem);margin:.5rem;font-size:1rem;color:var(--text-color)}div.search-box>span.icon{display:flex;position:absolute;top:calc(50% - 1rem / 2);right:1rem;width:1rem;height:1rem;box-sizing:border-box}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%} |
|||
*{font-family:sans-serif}body{margin:0}h1{font-size:1rem}:root{--stickers-per-row: 4;--sticker-size: calc(100vw / var(--stickers-per-row))}main{color:var(--text-color)}main.spinner{margin-top:5rem}main.error,main.empty{margin:2rem}main.empty{text-align:center}main.has-content{position:fixed;top:0;left:0;right:0;bottom:0;display:grid;grid-template-rows:calc(12vw + 2px) min-content auto}main.theme-light{--highlight-color: #eee;--search-box-color: var(--highlight-color);--text-color: black;background-color:#fff}main.theme-dark{--highlight-color: #444;--search-box-color: #383e4b;--text-color: white;background-color:#22262e}main.theme-dark .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}main.theme-black{--highlight-color: #222;--search-box-color: var(--highlight-color);--text-color: white;background-color:#000}main.theme-black .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}div.powered-by-giphy{padding:1rem}div.powered-by-giphy>img{width:100%}.icon{width:100%;height:100%;background-color:var(--text-color);mask-size:contain;-webkit-mask-size:contain;mask-image:var(--icon-image);-webkit-mask-image:var(--icon-image)}.icon.icon-settings{--icon-image: url(../res/settings.svg)}.icon.icon-recent{--icon-image: url(../res/recent.svg)}.icon.icon.icon-search{--icon-image: url(../res/search.svg)}.icon.icon.icon-giphy{background:center/contain no-repeat url(../res/giphy-light.svg);mask:unset}nav{display:flex;overflow-x:auto}nav>a{border-bottom:2px solid rgba(0,0,0,0)}nav>a.visible{border-bottom-color:green}nav>a>div.sticker{width:12vw;height:12vw}div.pack-list,nav{scrollbar-width:none}div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}div.pack-list{overflow-y:auto}div.pack-list.ios-safari-hack{position:fixed;top:calc(calc(12vw + 2px) + calc(2 * 0.7rem + 2 * 0.5rem + 1rem));bottom:0;left:0;right:0;-webkit-overflow-scrolling:touch}div.search-empty{margin:1.2rem;text-align:center}section.stickerpack{margin-top:.75rem}section.stickerpack>div.sticker-list{display:flex;flex-wrap:wrap}section.stickerpack>h1{margin:0 0 0 .75rem}section.stickerpack#pack-giphy{display:flex;justify-content:space-between;flex-direction:column;min-height:100%}div.sticker{display:flex;padding:4px;cursor:pointer;position:relative;width:var(--sticker-size);height:var(--sticker-size);box-sizing:border-box}div.sticker:hover{background-color:var(--highlight-color)}div.sticker>img{display:none;width:100%;object-fit:contain}div.sticker>img.visible{display:initial}div.sticker>.icon{width:70%;height:70%;margin:15%}div.search-box{position:relative;display:flex}div.search-box>input[type=text]{flex-grow:1;background-color:var(--search-box-color);outline:none;border:none;border-radius:.25rem;height:1rem;padding:.7rem;padding-right:calc(1rem + 0.7rem);margin:.5rem;font-size:1rem;color:var(--text-color)}div.search-box>span.icon{display:flex;position:absolute;top:calc(50% - 1rem/2);right:1rem;width:1rem;height:1rem;box-sizing:border-box}div.settings-list{display:flex;flex-direction:column}div.settings-list>*{margin:.5rem}div.settings-list button{padding:.5rem;border-radius:.25rem}div.settings-list input{width:100%} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue