noury/mirror-chatterino2
1
0
Fork 0
mirror of https://github.com/Chatterino/chatterino2.git synced 2024-11-21 22:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

Prototype Web View Implementation

Browse source
This commit is contained in:
Matija 2017-09-28 23:57:27 +02:00
parent 369b7c052b
commit bed332b6d8
9 changed files with 131 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chatterino.pro
View file

@ -4,7 +4,7 @@
# #
#------------------------------------------------- #-------------------------------------------------
QT += core gui network multimedia QT += core gui network multimedia webengine webenginewidgets webchannel
CONFIG += communi CONFIG += communi
COMMUNI += core model util COMMUNI += core model util
CONFIG += c++14 CONFIG += c++14

90
resources/chat.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Roboto, serif;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
.chat > * {
padding: 0;
margin: 0;
}
.chat-username:hover {
text-decoration: underline;
cursor: pointer;
}
.chat-element {
display: inline;
}
.chat-textual {
padding-right: 2px;
}
.chat-emote {
transform: translateY(25%);
}
</style>
</head>
<body>
<div>
<div id="chat" class="chat">
</div>
</div>
<script type="text/html" id="messageTemplate">
<div class="chat-element chat-textual">
<span style="color: blue;" class="chat-username">{{username}}</span>:
</div>
</script>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
let CHANNEL;
window.onload = () => {
new QWebChannel(qt.webChannelTransport, (channel) => {
CHANNEL = channel;
})
};
function addMessage(username, color, ...parts) {
let main = $('<div>');
let tmpl = $('#messageTemplate').html();
main.html(tmpl);
for (let part of parts) {
if (part.type === 'text') {
let msg = $('<div class="chat-element chat-textual"></div>');
msg.html(part.data);
main.append(msg);
} else if (part.type === 'emote') {
let msg = $('<img class="chat-element chat-emote"/>');
msg.attr('src', part.data);
main.append(msg);
}
}
$('#chat').append(main);
window.scrollTo(0, document.body.scrollHeight);
}
function test() {
if (CHANNEL) CHANNEL.objects.test.testMethod();
}
</script>
</body>
</html>

1
resources/resources.qrc
View file

@ -32,6 +32,7 @@
<file>images/UserProfile_22x.png</file> <file>images/UserProfile_22x.png</file>
<file>images/VSO_Link_blue_16x.png</file> <file>images/VSO_Link_blue_16x.png</file>
<file>sounds/ping2.wav</file> <file>sounds/ping2.wav</file>
<file>chat.html</file>
</qresource> </qresource>
<qresource prefix="/qt/etc"> <qresource prefix="/qt/etc">
<file>qt.conf</file> <file>qt.conf</file>

5
src/messages/word.cpp
View file

@ -127,6 +127,11 @@ int Word::getCharacterLength() const
return this->isImage() ? 2 : this->getText().length() + 1; return this->isImage() ? 2 : this->getText().length() + 1;
} }
const QString &Word::getEmoteURL() const
{
return emoteURL;
}
std::vector<short> &Word::getCharacterWidthCache() const std::vector<short> &Word::getCharacterWidthCache() const
{ {
// lock not required because there is only one gui thread // lock not required because there is only one gui thread

2
src/messages/word.hpp
View file

@ -114,6 +114,7 @@ public:
int getYOffset() const; int getYOffset() const;
void setOffset(int _xOffset, int _yOffset); void setOffset(int _xOffset, int _yOffset);
int getCharacterLength() const; int getCharacterLength() const;
const QString &getEmoteURL() const;
std::vector<short> &getCharacterWidthCache() const; std::vector<short> &getCharacterWidthCache() const;
@ -122,6 +123,7 @@ private:
QString text; QString text;
MessageColor color; MessageColor color;
bool _isImage; bool _isImage;
QString emoteURL;
Type type; Type type;
QString copyText; QString copyText;

39
src/widgets/channelview.cpp
View file

@ -35,7 +35,7 @@ ChannelView::ChannelView(WindowManager &windowManager, BaseWidget *parent)
#ifndef Q_OS_MAC #ifndef Q_OS_MAC
// this->setAttribute(Qt::WA_OpaquePaintEvent); // this->setAttribute(Qt::WA_OpaquePaintEvent);
#endif #endif
this->setMouseTracking(true); /*this->setMouseTracking(true);
QObject::connect(&SettingsManager::getInstance(), &SettingsManager::wordTypeMaskChanged, this, QObject::connect(&SettingsManager::getInstance(), &SettingsManager::wordTypeMaskChanged, this,
&ChannelView::wordTypeMaskChanged); &ChannelView::wordTypeMaskChanged);
@ -59,7 +59,14 @@ ChannelView::ChannelView(WindowManager &windowManager, BaseWidget *parent)
this->goToBottom->setVisible(false); this->goToBottom->setVisible(false);
connect(goToBottom, &RippleEffectLabel::clicked, this, connect(goToBottom, &RippleEffectLabel::clicked, this,
[this] { QTimer::singleShot(180, [this] { this->scrollBar.scrollToBottom(); }); }); [this] { QTimer::singleShot(180, [this] { this->scrollBar.scrollToBottom(); }); });*/
setLayout(&vbox);
vbox.addWidget(&web);
web.load(QUrl("qrc:/chat.html"));
web.page()->setBackgroundColor(this->colorScheme.ChatBackground);
web.setContextMenuPolicy(Qt::ContextMenuPolicy::NoContextMenu);
} }
ChannelView::~ChannelView() ChannelView::~ChannelView()
@ -112,7 +119,6 @@ bool ChannelView::layoutMessages()
for (std::size_t i = messages.getLength() - 1; i > 0; i--) { for (std::size_t i = messages.getLength() - 1; i > 0; i--) {
auto *message = messages[i].get(); auto *message = messages[i].get();
message->layout(layoutWidth, true); message->layout(layoutWidth, true);
h -= message->getHeight(); h -= message->getHeight();
@ -296,18 +302,29 @@ void ChannelView::setChannel(std::shared_ptr<Channel> channel)
// on new message // on new message
this->messageAppendedConnection = this->messageAppendedConnection =
channel->messageAppended.connect([this](SharedMessage &message) { channel->messageAppended.connect([this](SharedMessage &message) {
SharedMessageRef deleted; //SharedMessageRef deleted;
auto messageRef = new MessageRef(message); auto command = QString("addMessage('%1','%2'").arg("", "");
for (const auto &word : message->getWords()) {
command += ",";
if (word.isText()) {
command += "{type:'text', data:'" + word.getText() + "'}";
} else {
command += "{type:'emote', data:'" + word.getEmoteURL() + "'}";
}
}
command += ");";
qDebug() << command;
web.page()->runJavaScript(command);
if (this->messages.appendItem(SharedMessageRef(messageRef), deleted)) { /*if (this->messages.appendItem(SharedMessageRef(messageRef), deleted)) {
qreal value = std::max(0.0, this->getScrollBar().getDesiredValue() - 1); qreal value = std::max(0.0, this->getScrollBar().getDesiredValue() - 1);
this->getScrollBar().setDesiredValue(value, false); this->getScrollBar().setDesiredValue(value, false);
} }*/
layoutMessages(); //layoutMessages();
update(); //update();
}); });
// on message removed // on message removed
@ -348,7 +365,7 @@ void ChannelView::detachChannel()
void ChannelView::resizeEvent(QResizeEvent *) void ChannelView::resizeEvent(QResizeEvent *)
{ {
this->scrollBar.resize(this->scrollBar.width(), height()); /*this->scrollBar.resize(this->scrollBar.width(), height());
this->scrollBar.move(width() - this->scrollBar.width(), 0); this->scrollBar.move(width() - this->scrollBar.width(), 0);
this->goToBottom->setGeometry(0, this->height() - 32, this->width(), 32); this->goToBottom->setGeometry(0, this->height() - 32, this->width(), 32);
@ -357,7 +374,7 @@ void ChannelView::resizeEvent(QResizeEvent *)
layoutMessages(); layoutMessages();
this->update(); this->update();*/
} }
void ChannelView::setSelection(const SelectionItem &start, const SelectionItem &end) void ChannelView::setSelection(const SelectionItem &start, const SelectionItem &end)

4
src/widgets/channelview.hpp
View file

@ -14,6 +14,7 @@
#include <QScroller> #include <QScroller>
#include <QWheelEvent> #include <QWheelEvent>
#include <QWidget> #include <QWidget>
#include <QtWebEngineWidgets/QWebEngineView>
#include <boost/signals2.hpp> #include <boost/signals2.hpp>
@ -159,6 +160,9 @@ private:
boost::signals2::connection repaintGifsConnection; boost::signals2::connection repaintGifsConnection;
boost::signals2::connection layoutConnection; boost::signals2::connection layoutConnection;
QWebEngineView web;
QVBoxLayout vbox;
private slots: private slots:
void wordTypeMaskChanged() void wordTypeMaskChanged()
{ {

1
src/widgets/chatwidget.cpp
View file

@ -196,7 +196,6 @@ void ChatWidget::paintEvent(QPaintEvent *)
{ {
// color the background of the chat // color the background of the chat
QPainter painter(this); QPainter painter(this);
painter.fillRect(this->rect(), this->colorScheme.ChatBackground); painter.fillRect(this->rect(), this->colorScheme.ChatBackground);
} }

10
src/widgets/mainwindow.cpp
View file

@ -77,16 +77,6 @@ void MainWindow::repaintVisibleChatWidgets(Channel *channel)
if (page == nullptr) { if (page == nullptr) {
return; return;
} }
const std::vector<ChatWidget *> &widgets = page->getChatWidgets();
for (auto it = widgets.begin(); it != widgets.end(); ++it) {
ChatWidget *widget = *it;
if (channel == nullptr || channel == widget->getChannel().get()) {
widget->layoutMessages();
}
}
} }
void MainWindow::load(const boost::property_tree::ptree &tree) void MainWindow::load(const boost::property_tree::ptree &tree)