this.setState({ activeTab: "stickers" })}>Stickers
this.setState({ activeTab: "gifs" })}>GIFs
diff --git a/web/src/widget-api.js b/web/src/widget-api.js
index 9e35065..a078efd 100644
--- a/web/src/widget-api.js
+++ b/web/src/widget-api.js
@@ -13,178 +13,68 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see
.
+let widgetId = null
-const urlParams = new URLSearchParams(window.location.search);
-const widgetId = urlParams.get('widgetId'); // if you know the widget ID, supply it.
-console.log("Widget ID:"+widgetId);
-const api = new mxwidgets.WidgetApi(widgetId, '*');
+window.onmessage = event => {
+ if (!window.parent || !event.data) {
+ return
+ }
+ const request = event.data
+ if (!request.requestId || !request.widgetId || !request.action || request.api !== "toWidget") {
+ return
+ }
-// Before doing anything else, request capabilities:
-api.requestCapabilities(mxwidgets.StickerpickerCapabilities);
-api.requestCapability(mxwidgets.MatrixCapabilities.MSC4039UploadFile);
+ if (widgetId) {
+ if (widgetId !== request.widgetId) {
+ return
+ }
+ } else {
+ widgetId = request.widgetId
+ }
-api.on("ready", () => {console.log("ready event received")});
+ let response
-// Start the messaging
-api.start();
+ if (request.action === "visibility") {
+ response = {}
+ } else if (request.action === "capabilities") {
+ response = { capabilities: ["m.sticker"] }
+ } else {
+ response = { error: { message: "Action not supported" } }
+ }
-// If waitForIframeLoad is false, tell the client that we're good to go
-//api.sendContentLoaded();
-
-export function sendSticker(content){
- const data = {
- content: {...content},
- name: content.body,
- };
- // do the same thing that tulir does
- delete data.content.id;
- // send data
- api.sendSticker(data);
+ window.parent.postMessage({ ...request, response }, event.origin)
}
-/*
- *export function sendGIF(content){
- * // just print out content, should be URL
- * console.log("Content:"+content.url);
- * return new Promise((resolve, reject) => {
- * const xhr = new XMLHttpRequest();
- * xhr.open('GET', content.url, true);
- * xhr.onreadystatechange = function() {
- * if (xhr.readyState === 4) {
- * if (xhr.status === 200) {
- * const responseData = xhr.responseText;
- * // Call uploadFile with response data
- * api.uploadFile(responseData)
- * .then(result => {
- * console.log("Here's the result:"+result.content_uri);
- * // mess around with the content object, then send it as sticker
- * content.url = result.content_uri;
- * sendSticker(content);
- * resolve(result);
- * })
- * .catch(error => {
- * reject(error);
- * });
- * } else {
- * reject(new Error('Failed to fetch data')); // Reject the outer promise if fetching data fails
- * }
- * }
- * };
- * xhr.send();
- * });
- *}
- */
+export function sendSticker(content) {
+ const data = {
+ content: { ...content },
+ // `name` is for Element Web (and also the spec)
+ // Element Android uses content -> body as the name
+ name: content.body,
+ }
+ // Custom field that stores the ID even for non-telegram stickers
+ delete data.content.id
-export async function sendGIF(content){
- // just print content, since it's a custom type with URL
- console.log("Content:"+content.url);
- // use fetch because I'm on IE
- const lol = await fetch(content.url);
- const uri_file = await lol.blob();
- // call uploadFile with this
- var result = await api.uploadFile(uri_file)
- console.log("Got URI:"+result.content_uri);
- content.url = result.content_uri;
- // get thumbnail
- //const thumb_uri = await fetch(content.info.thumbnail_url)
- //const thumb_file = await thumb_uri.blob();
- //result = await api.uploadFile(thumb_file)
- //console.log("Thumb URI:"+result.content_uri);
- //content.info.thumbnail_url = result.content_uri;
- // actually, just delete the thumbnail
- delete content.info.thumbnail_url;
- // finally, send it as sticker
- sendSticker(content);
+ // This is for Element iOS
+ const widgetData = {
+ ...data,
+ description: content.body,
+ file: `${content.id}.png`,
+ }
+ // Element iOS explodes if there are extra fields present
+ delete widgetData.content["net.maunium.telegram.sticker"]
+ window.parent.postMessage({
+ api: "fromWidget",
+ action: "m.sticker",
+ requestId: `sticker-${Date.now()}`,
+ widgetId,
+ data,
+ widgetData,
+ }, "*")
}
-
-/*
- *let widgetId = null
- *
- *window.onmessage = event => {
- * if (!window.parent || !event.data) {
- * return
- * }
- *
- * const request = event.data
- * if (!request.requestId || !request.widgetId || !request.action || request.api !== "toWidget") {
- * return
- * }
- *
- * if (widgetId) {
- * if (widgetId !== request.widgetId) {
- * return
- * }
- * } else {
- * widgetId = request.widgetId
- * }
- *
- * let response
- *
- * if (request.action === "visibility") {
- * response = {}
- * } else if (request.action === "capabilities") {
- * response = { capabilities: ["m.sticker", "org.matrix.msc4039.upload_file"] }
- * } else {
- * response = { error: { message: "Action not supported" } }
- * }
- *
- * window.parent.postMessage({ ...request, response }, event.origin)
- *}
- *
- *export function sendSticker(content) {
- * const data = {
- * content: { ...content },
- * // `name` is for Element Web (and also the spec)
- * // Element Android uses content -> body as the name
- * name: content.body,
- * }
- * // Custom field that stores the ID even for non-telegram stickers
- * delete data.content.id
- *
- * // This is for Element iOS
- * const widgetData = {
- * ...data,
- * description: content.body,
- * file: `${content.id}.png`,
- * }
- * // Element iOS explodes if there are extra fields present
- * delete widgetData.content["net.maunium.telegram.sticker"]
- *
- * window.parent.postMessage({
- * api: "fromWidget",
- * action: "m.sticker",
- * requestId: `sticker-${Date.now()}`,
- * widgetId,
- * data,
- * widgetData,
- * }, "*")
- *}
- *
- *export function sendGIF(content) {
- * const data = {
- * content: { ...content },
- * name: content.body,
- * msgtype: "m.image"
- * }
- *
- * delete data.content.id
- * // This is for Element iOS
- * const widgetData = {
- * ...data,
- * description: content.body,
- * file: `${content.id}.png`,
- * }
- *
- * window.parent.postMessage({
- * api: "fromWidget",
- * action: "m.room.message",
- * requestId: `gif-${Date.now()}`,
- * widgetId,
- * data,
- * widgetData,
- * }, "*")
- *}
- */
+export function sendGIF(content) {
+ return sendSticker(content)
+}
diff --git a/web/style/index.css b/web/style/index.css
index fd8211f..e33e450 100644
--- a/web/style/index.css
+++ b/web/style/index.css
@@ -1,16 +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%}
-
-a.tab {
- padding: 5% 5%;
- width: 40%;
- text-align: center;
- border: none;
- background-color: #f0f0f0;
- cursor: pointer;
- -webkit-appearance: button;
- -moz-appearance: button;
- appearance: button;
-
- text-decoration: none;
- color: initial;
- }