[FEATURE] Option to choose between different / preferred designs for the HTML outcome? #97
Comments
|
Update: Maybe this will help to implement the WhatsApp design. These sites list WhatsApp design code for HTML, CSS and JS: |
Thanks for finding the references. However, I need to review the copyright issues before adopting the code and style. For example, I will likely release the theme in a separate repository. |
|
@KnugiHK check out WhatsApp Exporter on github -- there is implemented a WhatsApp-style theme using CSS that looks really great, almost exactly like on the phone. The project says GPL 3.0 in terms of license. |
Unfortunately, MIT is not compatible with GPL 3.0. |
|
But the good news is that the codepen implementation mentioned by @Marvolo1590 is MIT, according to https://blog.codepen.io/documentation/licensing/! |
|
I created a theme similar to WhatsApp Web using Claude. Of course, it is an overview only and has yet been implemented to be used with the exporter. Anyway, comments are welcome! |
This looks great! |
@KnugiHK Amazing. Lovely to know that my feature request is making progress. I believe many will like the option to choose between different layout. I very much like the contacts' list on the left. This would be a major advantage to the current Telegram-based output where each chat ends up as an individual html file. Having a chat list like here would make it a lot more convenient. Maybe it would be possible to still have all the chats as individual html files and additionally a master-html file, joining them all together and using a chat list area like in the screenshot? Anyway, keep it up! PS: oops, must have hit the wrong button and this thread closed itself. I hope it's now active and open again, if not, maybe you can set it back to how it was before. |
I planned to implement the template using an iframe, with an index.html file serving as the master file. However, I anticipate that the changes required could potentially disrupt the current template, so maintaining compatibility will also need to be carefully addressed. |
|
Hello @KnugiHK, do you already have something we can test? I'm available to test it if it helps you. |
I haven’t started coding it yet, but I’ll definitely share it with you for testing when it’s ready. Stay tuned! |
|
Happy New Year, everyone! 🎉 We’re making great progress on the WhatsApp theme, and I wanted to give you all an exclusive preview. Feel free to share any feedback!
|
Happy New Year to you too! In the meantime, I have merged a lot of my WhatsApp chats together (for example, when people got a new phone number and hence had a whole new WA-chat) back to one and repaired some missing media files that were not displaying inside the chats anymore. However, one thing I've been noticing with the current script (Telegram design): the larger the chat files get, the longer it seems to take my browser to render all the chats within the HTML file, especially when all the media are included. Due to the chat merging I've described above, I have some chats that now date back to 2015 and have over 10.000 of different media. The export HTML file is 60 MB (60.000 KB) large. If I open that with my default browser (FireFox) it takes forever to scroll through all the chats and the media. Would exporting it into a PDF file (with media files included) work better than HTML? Or are my files simply too large to work properly? Anyway, as always, thanks a lot for your great effort. I've been advertising this project and script together with a step-by-step manual in one of my most frequent computer / android web boards, also telling them that a WhatsApp-based design might be available soon... |
Yes, the size issue is inevitable. You can use the
It's a great idea to implement. However, I'd consider it more of a feature request, so it would be best to track it as a separate issue. |
|
The theme is now ready for testing. To try it out, switch to the |
So I downloaded the dev branch folder, opened it in CMD and tried to run it on an msgstore.db file as always by using this command: wtsexporter -a --experimental-new-theme But it throws an error message:
|
|
You will need to reinstall the exporter on the dev branch: |
It looks awesome, I'm in love with it already. Just some minor things I've noticed: The quotes seem to be working properly only for pure text messages. As soon as the quoted message is not a text message but, say, a picture or voice message, it says "replying to ... this message". If you click on that hyperlink it will still take you the quoted message, though. So the hyperlink works. I've included a screenshot showing a comparison to the actual layout inside WhatsApp. In the actual app, the quote just says that it was from "me" and then specifies what kind of media file it is, e.g., a picture, voice message, etc and it also includes a small squared preview of the picture/video. If it's a voice message, the quote contains the length of the message and who sent it. But I guess the preview of pictures would not be essential or crucial to implement, especially if this means a lot of work.
Another thing I've noticed is that the layout inside the browser is quite narrow. It's similiar to a phone screen in height and width. Perhaps, if it's possible, it wouldn't be a bad idea to use the full width of a PC browser window for the HTML design?
The last thing (but that's only really a minor aspect) I've noticed is that the emoticons have a different design than the original ones used by WhatsApp-app. I don't know if it is possible to use the same ones as the app does or if there are copyright issues perhaps? Other than that, it's looking great already! Keep it up! And thanks a lot! |
|
@Marvolo1590 Thanks for your comments!
This would require changes to the exporter code, not just the template (or at least, it would necessitate additional JavaScript). While I agree that having the ability to preview pictures or videos would be useful, I think it's best treated as a separate feature request due to the effort involved. This is tracked in #128.
I can adjust it to fit the browser, but wouldn't that result in the messages being too spaced out, as you mentioned? In the original Telegram-like design, I also felt they were too far apart, which is why I reduced the width to its current size.
Technically, the code has no connection to WhatsApp, as we’re using a completely different framework to build the page. However, trying to make it resemble the original could still lead to legal issues, so I believe it’s best not to reference WhatsApp too much since it's proprietary. |
You're probably right, I guess. Could you maybe share a screenshot of how it looks if the messages fit the browser so we can compare to the current layout? Other than that (and that's also just a minor thing): would there be an easy way for people to change the overall-language of the exporter? So that the headline is not "Chat history with xxx" but individual in everyone's preferred language? If there was an easy way or option that lets me rewrite that headline by myself, that would already do. No need to implement 50+ pre-translated languages lol. Another thing that would probably be useful for both designs (Telegram & WhatsApp) would be to implement a search function, just as the original app does. Where you can enter words or phrases and it then comes up with the respective chat where the word was written in. But since this would be a "global search" accross all chats, this would probably require to bundle all chats together into one chatlist window. Alternatively, the search function could be implemented into every single exported chat. But only, if this is not too much effort. Maybe CTRL+F inside the browser would still do the trick. And the last question: how exactly can I split a chat according to time? Let's say, I wanted to export a chat on a yearly basis, so from January 1st to December 31st. And each year will then become a separate export-HTML? Probably that way, my chats won't end up getting too big and hard to process by my browser as is already the case with very long chats. Thanks for your work! |
I’ll get to that later.
Yup. It can be implemented I believe.
As for the search function, that's a great idea! In fact, if you take a look at the source code, you'll see that the search function is already being prepared.
Although the split feature doesn’t directly support time-based split, you can use the date filter to achieve that. |
Is your feature request related to a problem? Please describe.
My feature wish is not part of a "problem". I know that this script is relying on a Telegram-like design. However, it would probably upgrade this (already awesome) script by a lot, if there was an option to choose between different designs for the HTML outcome.
Describe the solution you'd like
Option to choose between different designs for the HTML files:
Like:
other (?)The chat bubbles known from the original WhatsApp design (inluding the bubbles for quoted messages) would make the oucome a lot more readable, at least for me, as I'm struggling a bit with the Telegram design where all the messages appear just right beneath each other with little visual markers to differentiate between own and other messages. The original WhatsApp bubbles to the left and right hand side of the chat make it a lot clearer and more navigable.
So, an option to choose between preferred designs would serve both parties, those who prefer the Telegram design and those who prefer the original WhatsApp design.
Additional context
NONE
The text was updated successfully, but these errors were encountered: