Rich Embeds

clarkwinkelmann

Teddan this new error message says it can't write the actual error message to the log file, so we don't know what the real error is.

Make sure Flarum can write to the <flarum>/storage/logs folder.

Teddan

clarkwinkelmann
Now I think I get the real error here😂:

request.js:173 POST https://www.xn--fmrv2rkpbv8uymm.com/api/extensions/kilowhat-rich-embeds 500
（匿名） @ request.js:173
（匿名） @ request.js:23
（匿名） @ request.js:22
e.request @ Application.tsx:503
n.toggle @ ExtensionPage.tsx:234
n.onchange @ Checkbox.js:61
（匿名） @ withAttr.ts:14
L.handleEvent @ render.js:888
admin#/extension/kilowhat-rich-embeds:1 Uncaught (in promise) Hn {status: 500, options: {…}, xhr: XMLHttpRequest, responseText: '{"errors":[{"status":"500","code":"unknown"}]}', response: {…}, …}alert: content: Array(1)0: "糟糕，出错啦！请刷新页面重试。"length: 1[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()findLast: ƒ findLast()findLastIndex: ƒ findLastIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}[[Prototype]]: Objectcontrols: falsetype: "error"[[Prototype]]: Objectoptions: {background: true, url: 'https://www.xn--fmrv2rkpbv8uymm.com/api/extensions/kilowhat-rich-embeds', method: 'POST', body: {…}, deserialize: ƒ, …}response: {errors: Array(1)}responseText: "{\"errors\":[{\"status\":\"500\",\"code\":\"unknown\"}]}"status: 500xhr: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, abort: ƒ, onreadystatechange: ƒ, …}[[Prototype]]: Object
Promise.then（异步）
n.toggle @ ExtensionPage.tsx:241
n.onchange @ Checkbox.js:61
（匿名） @ withAttr.ts:14
L.handleEvent @ render.js:888

clarkwinkelmann

Teddan that's still not the real error 😅 That's what the client-side says when debug mode is disabled, it just says an error occurred and that more details are available in the log file on the server. If debug mode is enabled in config.php more details might appear in that error. But in any case if Flarum can write to the log file, everything needed should be in the log file (<flarum>/storage/logs).

Teddan

clarkwinkelmann Thanks for help I just purge the extension and everything works fine 😚

And For the jumping page problem that I mentioned in another discussion is it the right setting for that?

clarkwinkelmann

Teddan yes "Rich Embeds for Images" is the setting that will cover it. It'll only work for new/edited posts though. I will try to get the import tool for existing posts ready soon.

Teddan

clarkwinkelmann unfortunately I still notice unexpected jumping action of picture when rich embed is active 😭😭

CyberGene

Teddan it applies to new pictures only. And only those that are inserted as BBcode or Markdown.

Teddan

CyberGene Thank you . Fixed. I found Markdown is not workable to fix it, but bbcode seems perfect.

clarkwinkelmann

Teddan do you have a link to a page where I could see one of your posts with markdown? Maybe a post that contains both one in markdown and one in bbcode format? Both should have the exact same output with the extension.

If you edited older posts, you need at least one character change to force Flarum to re-parse the post. So changing from Markdown to bbcode in an older post might have done the trick but only because it changed the (raw) content of the post and not actually because it's bbcode. You could try reverting to Markdown after using bbcode to see if it still works or stops working again.

clarkwinkelmann

Version 1.2.0 - July 24, 2022

Added Scan command for import and update after permission changes
Added Refresh command to mass-refresh embeds
Added API-powered Flarum embeds (discussions+users)
Added API-powered GitHub embeds (repos+issues+pulls)
Added API-powered YouTube embeds (videos)
Added API-powered Google Drive embeds (files)
Added Embedded player on YouTube links
Added Popover on links that failed rendering to give access to refresh controls
Added MySQL version check during extension activation
Changed Tweaked colors and margins
Changed No longer proxying images to the same domain as Flarum
Fixed Links containing ampersands wouldn't render as blocks

You must run php flarum migrate immediately after performing the update. Trying to create discussions or posts before the migrations have run will lead to errors.

If you get an error saying your MySQL version is unsupported, see workaround in MySQL requirements and please report your select version() as version SQL command output and I'll get it fixed ASAP.

Most of the new features are disabled by default. Visit the extension page in the admin panel to configure.

Check the documentation to find the requirements and instructions for each new feature https://kilowhat.net/flarum/extensions/rich-embeds As you might guess from their name, you need to configure access to the GitHub and/or Google APIs to enable the new features.

Just like in previous versions, the MediaEmbed feature from FoF Formatting has priority over regular links.
This means the new YouTube and Google Drive rich embeds can only be used when MediaEmbed is disabled.

A screenshot showing what it looks like with all of the new options enabled (in "separated" layout mode):

4 websites with API-powered embeds

CyberGene

While migrating I get the following:
In 20210101_000000_verify_mysql_requirements.php line 53: Rich Embeds could not be enabled, because it depends on: MySQL 5.7.8+ or MariaDB 10.2.7+

The output of select version() as version is 5.7.38-41-log
Should I still use the workaround?

clarkwinkelmann

CyberGene The output of select version() as version is 5.7.38-41-log

Thank you, I'll get this fixed.

CyberGene Should I still use the workaround?

Yes! And it seems like it worked from your next posts 😃

CyberGene is there any way to still use the FoF Formatting "Media Embed"

I'm looking into it. Unfortunately FoF Formatting seems to be all or nothing, but I might publish a separate extension that only allows enabling select MediaEmbed websites, which would work around the issue.

CyberGene the scan logic got stuck on 703/12370, not sure why, possibly through throttling

Yes if it's stuck it's likely because it's waiting on an external request to complete. I have not customized the default, it's possible Guzzle waits up to 20 seconds before giving up on a request.

CyberGene When I hover with the mouse over an image, I see a small block appearing beneath the image containing the URL to the image and a text saying no preview could be generated

Do you mean links to images but that are not rendered as image? That's the new intended behavior but I agree it's not fantastic. I plan to display information similar to the image overlay in the future.

For images rendered as images though the overlay should still work like before. I just tested again on both Flarum 1.2 and 1.4 with both scanned and new posts, and the overlay renders fine.

Could you share a screenshot so I can confirm which of those situations it is?

CyberGene Previously if I hovered on the image, I would see an overlay in the top right corner with the dimensions of the image

This is still in the extension and it was not modified in the latest version. Try clearing the cache and make sure the feature is still enabled in the admin panel.

If that still doesn't help, can you share your php flarum info output?

CyberGene

I disabled the check and now it all works, thank you for this update 🙂

A few remarks: is there any way to still use the FoF Formatting "Media Embed" but somehow resort to this extension for YouTube previews? I disabled the Media Embed and I really like the YouTube preview with the embedded player you've implemented which will help in eliminating the scroll jump, however with disabling the Media Embed we lost the SoundCloud player, Twitter previews and possibly others and so I had to re-enable it again. It would be good if we can somehow use both together, with YouTube being handled by your extension.

BTW, the scan logic got stuck on 703/12370, not sure why, possibly through throttling... I'll keep it open for a while and see if it will resume after a while. Is it safe to Ctrl+C while it's working?

CyberGene

CyberGene BTW, the scan logic got stuck on 703/12370, not sure why, possibly through throttling... I'll keep it open for a while and see if it will resume after a while. Is it safe to Ctrl+C while it's working?

OK, it was still stuck, so I stopped it through Ctrl+C then executed the command again and it resumed from a further post and is now working.

CyberGene

Something else I noticed, not sure if it came with the latest version though or was like that before. When I hover with the mouse over an image, I see a small block appearing beneath the image containing the URL to the image and a text saying no preview could be generated. Well, the preview is the image itself, so this text is a bit misleading. But I think the entire block is kind of unnecessary for an image since the URL can also be seen in the browser status bar too. Can this be disabled for images?

CyberGene

Sorry for bombarding the discussion but I think something might be broken. I executed the scan, had to stop it a few times and resume but now all has been scanned successfully and repeated execution goes very fast.

I also have the "Riche embeds for images" enabled.

Previously if I hovered on the image, I would see an overlay in the top right corner with the dimensions of the image. If an image was an old one, I would edit the post and save it (without changing anything) and the extension would fetch the dimensions of the image. That is not working anymore and I'm not sure if it's the reason but I started seeing the scroll-jumping behavior again. I have a small discussion where the first post contains multiple images. If I clear the Safari cache and reload the discussion, I can see the scroll-jump. And none of the images has its dimensions displayed on hovering. And the jump-scroll behavior was previously eliminated (probably due to the image dimensions taken into account). Is it possible that there's a regression?

CyberGene

clarkwinkelmann Do you mean links to images but that are not rendered as image?

No, these are images that are rendered and visible as images, not as links, but hovering over them would still show the box like this:

Now, regarding the other problem, I don't know why but some recent images (by recent I mean uploaded after I installed this extension) and using the BBcode image template (URL and IMG tags) are now lacking the image dimensions in the top right corner when hovering over the image. I think previously every image that was uploaded after installed this extension, had those dimensions shown. I believe the scan command might have somehow removed those. As a result, discussions with such images exhibit the scroll-jump problem if I clear the browser cache and relod them. I also tested clearing the Flarum cache multiple times but it doesn't help. However there are other recent images that have those dimensions... This is very odd, I don't know what happened since all these images are uploaded in AWS.

Here's the Flarum info:

Flarum core 1.4.0
PHP version: 8.1.8
MySQL version: 5.7.38-41-log
Loaded extensions: Core, date, libxml, openssl, pcre, sqlite3, zlib, bcmath, bz2, calendar, ctype, curl, dba, dom, enchant, hash, fileinfo, filter, ftp, gd, gettext, gmp, json, iconv, SPL, intl, session, mbstring, standard, mysqlnd, pcntl, exif, mysqli, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, imap, shmop, SimpleXML, soap, sockets, sodium, sysvmsg, sysvsem, tidy, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, memcached, Zend OPcache
+-------------------------------------+---------+--------+
| Flarum Extensions                   |         |        |
+-------------------------------------+---------+--------+
| ID                                  | Version | Commit |
+-------------------------------------+---------+--------+
| flarum-flags                        | v1.4.0  |        |
| flarum-suspend                      | v1.4.0  |        |
| flarum-tags                         | v1.4.0  |        |
| flarum-bbcode                       | v1.4.0  |        |
| fof-spamblock                       | 1.0.2   |        |
| flarum-subscriptions                | v1.4.0  |        |
| flarum-approval                     | v1.4.0  |        |
| flarum-markdown                     | v1.4.0  |        |
| zerosonesfun-inline-audio           | 3.0     |        |
| v17development-seo                  | v1.8.0  |        |
| the-turk-flamoji                    | 1.0.4   |        |
| sycho-move-posts                    | v0.1.6  |        |
| kilowhat-rich-embeds                | 1.2.0   |        |
| fof-user-directory                  | 1.2.3   |        |
| fof-user-bio                        | 1.1.0   |        |
| fof-upload                          | 1.2.3   |        |
| fof-stopforumspam                   | 1.2.1   |        |
| fof-sitemap                         | 1.0.3   |        |
| fof-polls                           | 1.1.0   |        |
| fof-pages                           | 1.0.4   |        |
| fof-nightmode                       | 1.4.0   |        |
| fof-links                           | 1.1.1   |        |
| fof-ignore-users                    | 1.1.0   |        |
| fof-forum-statistics-widget         | 1.0.2   |        |
| fof-formatting                      | 1.0.2   |        |
| fof-follow-tags                     | 1.1.5   |        |
| fof-byobu                           | 1.1.6   |        |
| flarum-sticky                       | v1.4.0  |        |
| flarum-statistics                   | v1.4.0  |        |
| flarum-pusher                       | v1.4.0  |        |
| flarum-nicknames                    | v1.4.0  |        |
| flarum-mentions                     | v1.4.0  |        |
| flarum-lock                         | v1.4.0  |        |
| flarum-likes                        | v1.4.0  |        |
| flarum-lang-english                 | v1.4.0  |        |
| flarum-emoji                        | v1.4.0  |        |
| extiverse-mercury                   | 0.2.0   |        |
| davwheat-session-keepalive          | 1.1.0   |        |
| clarkwinkelmann-scout               | 0.1.2   |        |
| clarkwinkelmann-first-post-approval | 1.0.0   |        |
| askvortsov-rich-text                | v2.1.7  |        |
| askvortsov-markdown-tables          | v1.2.1  |        |
+-------------------------------------+---------+--------+
Base URL: https://myforum.com/forum
Installation path: /home/customer/www/myforum.com/public_html/forum

Deprecated: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in /home/customer/www/myforum.com/public_html/forum/vendor/flarum/core/src/Foundation/Console/InfoCommand.php on line 162
Queue driver: sync
Mail driver: smtp
Debug mode: off

clarkwinkelmann

CyberGene oh, I see, it's an image tag inside of a link tag.

There's currently no special logic to handle that situation, so it should result in both a popover for the link and an overlay for the image.

I suspect the image overlay (and dimensions) fails to render because the two are nested. If it worked before I'm not sure what would have broken it but I will investigate.

I checked on the page you linked and all the metadata about the images is correctly loaded, so it's not a problem with Amazon. The problem must be in my extension's javascript.

CyberGene

If you're interested in seeing this problem, you can freely register to our forum. Here's a discussion which contains images in the first post that won't show dimensions and would cause the discussion to scroll-jump in Safari for macOS (you have to empty the browser cache to reproduce it but it's 100% reproducible this way):
https://pianoclack.com/forum/d/555-my-new-yamaha-acoustic-grand-piano/

P.S. I also tried editing that discussion to add a character, which is expected to force the image dimension fetching but it doesn't seem to work either.

CyberGene

clarkwinkelmann there's something intermittent, see this sandbox discussion for example:
https://pianoclack.com/forum/d/292-test-sandbox-discussion/28

Look at the last two posts, the first one is a just an URL to the image (on Wikipedia), the second one is the IMG inside URL (this is the same image but uploaded through FoF to our AWS). Sometimes I see the dimension overlays on both of them, then I don't see them on either one... I'm not sure what it depends on. Could also be a browser issue, who knows. I used to see those overlays, then I reloaded the page and can't see them anymore. I guess if I open the forum after a while they might be there again.

clarkwinkelmann

Version 1.2.1 - July 25, 2022

Fixed Rich Images wrapped in links not rendering correctly.
Fixed Alt text missing from Rich Images.
Fixed MySQL version check not comparing the correct numbers.

You must clear the Flarum cache for the alt text fix to be applied.

See 1.2.0 release notes if you are upgrading from an older version.

CyberGene this should fix the issues.

« Previous Page Next Page »