RepoMirrors/tdesktop
1
0
Fork 0
mirror of https://github.com/telegramdesktop/tdesktop synced 2025-01-19 05:31:22 +00:00
Code Issues Projects Releases Wiki Activity

Improve shared videos design.

Browse Source
This commit is contained in:
John Preston 2019-03-15 00:00:24 +04:00
parent 0df628dc7a
commit f2a7cf5c64
11 changed files with 45 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Telegram/Resources/icons/overview_video_download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
Telegram/Resources/icons/overview_video_download@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 B

BIN
Telegram/Resources/icons/overview_video_download@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 B

BIN
Telegram/Resources/icons/overview_video_play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 B

BIN
Telegram/Resources/icons/overview_video_play@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 321 B

BIN
Telegram/Resources/icons/overview_video_play@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

2
Telegram/SourceFiles/app.cpp
View File

@ -613,6 +613,8 @@ namespace App {
prepareCorners(SelectedOverlayLargeCorners, st::historyMessageRadius, st::msgSelectOverlay);
prepareCorners(DateCorners, st::dateRadius, st::msgDateImgBg);
prepareCorners(DateSelectedCorners, st::dateRadius, st::msgDateImgBgSelected);
prepareCorners(OverviewVideoCorners, st::overviewVideoStatusRadius, st::msgDateImgBg);
prepareCorners(OverviewVideoSelectedCorners, st::overviewVideoStatusRadius, st::msgDateImgBgSelected);
prepareCorners(InShadowCorners, st::historyMessageRadius, st::msgInShadow);
prepareCorners(InSelectedShadowCorners, st::historyMessageRadius, st::msgInShadowSelected);
prepareCorners(ForwardCorners, st::historyMessageRadius, st::historyForwardChooseBg);

2
Telegram/SourceFiles/app.h
View File

@ -35,6 +35,8 @@ enum RoundCorners {
SelectedOverlayLargeCorners,
DateCorners,
DateSelectedCorners,
OverviewVideoCorners,
OverviewVideoSelectedCorners,
ForwardCorners,
MediaviewSaveCorners,
EmojiHoverCorners,

10
Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp
View File

@ -1779,12 +1779,10 @@ void OverlayWidget::displayDocument(DocumentData *doc, HistoryItem *item) {
} else {
_doc->automaticLoad(fileOrigin(), item);
if (_doc->canBePlayed()) {
if (_doc->loading()) {
initStreamingThumbnail();
} else {
initStreaming();
}
if (_doc->canBePlayed() && !_doc->loading()) {
initStreaming();
} else if (_doc->isVideoFile()) {
initStreamingThumbnail();
} else if (_doc->isTheme()) {
initThemePreview();
} else {

9
Telegram/SourceFiles/overview/overview.style
View File

@ -127,3 +127,12 @@ overviewFilter: FlatInput(defaultFlatInput) {
height: 32px;
textMrg: margins(32px, 3px, 32px, 3px);
}
overviewVideoStatusMargin: 3px;
overviewVideoStatusPadding: point(6px, 0px);
overviewVideoStatusRadius: 4px;
overviewVideoPlay: icon {{ "overview_video_play", historyFileThumbIconFg }};
overviewVideoPlaySelected: icon {{ "overview_video_play", historyFileThumbIconFgSelected }};
overviewVideoDownload: icon {{ "overview_video_download", historyFileThumbIconFg }};
overviewVideoDownloadSelected: icon {{ "overview_video_download", historyFileThumbIconFgSelected }};
overviewVideoRadialSize: 36px;

56
Telegram/SourceFiles/overview/overview_layout.cpp
View File

@ -412,6 +412,8 @@ int32 Video::resizeGetHeight(int32 width) {
void Video::paint(Painter &p, const QRect &clip, TextSelection selection, const PaintContext *context) {
const auto selected = (selection == FullSelection);
const auto blurred = _data->thumbnailInline();
const auto goodLoaded = _data->goodThumbnail()
&& _data->goodThumbnail()->loaded();
const auto thumbLoaded = _data->hasThumbnail()
&& _data->thumbnail()->loaded();
@ -424,12 +426,15 @@ void Video::paint(Painter &p, const QRect &clip, TextSelection selection, const
}
}
updateStatusText();
bool radial = isRadialAnimation(context->ms);
const auto radial = isRadialAnimation(context->ms);
const auto radialOpacity = radial ? _radial->opacity() : 0.;
if ((blurred || thumbLoaded)
if ((blurred || thumbLoaded || goodLoaded)
&& (_pix.width() != _width * cIntRetinaFactor())) {
auto size = _width * cIntRetinaFactor();
auto img = thumbLoaded
auto img = goodLoaded
? _data->goodThumbnail()->original()
: thumbLoaded
? _data->thumbnail()->original()
: Images::prepareBlur(blurred->original());
if (img.width() == img.height()) {
@ -457,30 +462,30 @@ void Video::paint(Painter &p, const QRect &clip, TextSelection selection, const
p.fillRect(QRect(0, 0, _width, _height), st::overviewPhotoSelectOverlay);
}
if (!selected && !context->selecting && !loaded) {
if (!selected && !context->selecting && radialOpacity < 1.) {
if (clip.intersects(QRect(0, _height - st::normalFont->height, _width, st::normalFont->height))) {
int32 statusX = st::msgDateImgPadding.x(), statusY = _height - st::normalFont->height - st::msgDateImgPadding.y();
int32 statusW = st::normalFont->width(_status.text()) + 2 * st::msgDateImgPadding.x();
int32 statusH = st::normalFont->height + 2 * st::msgDateImgPadding.y();
statusX = _width - statusW + statusX;
p.fillRect(rtlrect(statusX - st::msgDateImgPadding.x(), statusY - st::msgDateImgPadding.y(), statusW, statusH, _width), selected ? st::msgDateImgBgSelected : st::msgDateImgBg);
const auto download = !loaded && !_data->canBePlayed();
const auto &icon = download
? (selected ? st::overviewVideoDownloadSelected : st::overviewVideoDownload)
: (selected ? st::overviewVideoPlaySelected : st::overviewVideoPlay);
const auto text = download ? _status.text() : _duration;
const auto margin = st::overviewVideoStatusMargin;
const auto padding = st::overviewVideoStatusPadding;
const auto statusX = margin + padding.x(), statusY = _height - margin - padding.y() - st::normalFont->height;
const auto statusW = icon.width() + padding.x() + st::normalFont->width(text) + 2 * padding.x();
const auto statusH = st::normalFont->height + 2 * padding.y();
p.setOpacity(1. - radialOpacity);
App::roundRect(p, statusX - padding.x(), statusY - padding.y(), statusW, statusH, selected ? st::msgDateImgBgSelected : st::msgDateImgBg, selected ? OverviewVideoSelectedCorners : OverviewVideoCorners);
p.setFont(st::normalFont);
p.setPen(st::msgDateImgFg);
p.drawTextLeft(statusX, statusY, _width, _status.text(), statusW - 2 * st::msgDateImgPadding.x());
icon.paint(p, statusX, statusY + (st::normalFont->height - icon.height()) / 2, _width);
p.drawTextLeft(statusX + icon.width() + padding.x(), statusY, _width, text, statusW - 2 * padding.x());
}
}
if (clip.intersects(QRect(0, 0, _width, st::normalFont->height))) {
int32 statusX = st::msgDateImgPadding.x(), statusY = st::msgDateImgPadding.y();
int32 statusW = st::normalFont->width(_duration) + 2 * st::msgDateImgPadding.x();
int32 statusH = st::normalFont->height + 2 * st::msgDateImgPadding.y();
p.fillRect(rtlrect(statusX - st::msgDateImgPadding.x(), statusY - st::msgDateImgPadding.y(), statusW, statusH, _width), selected ? st::msgDateImgBgSelected : st::msgDateImgBg);
p.setFont(st::normalFont);
p.setPen(st::msgDateImgFg);
p.drawTextLeft(statusX, statusY, _width, _duration, statusW - 2 * st::msgDateImgPadding.x());
}
QRect inner((_width - st::msgFileSize) / 2, (_height - st::msgFileSize) / 2, st::msgFileSize, st::msgFileSize);
if (clip.intersects(inner)) {
QRect inner((_width - st::overviewVideoRadialSize) / 2, (_height - st::overviewVideoRadialSize) / 2, st::overviewVideoRadialSize, st::overviewVideoRadialSize);
if (radial && clip.intersects(inner)) {
p.setOpacity(radialOpacity);
p.setPen(Qt::NoPen);
if (selected) {
p.setBrush(st::msgDateImgBgSelected);
@ -494,14 +499,8 @@ void Video::paint(Painter &p, const QRect &clip, TextSelection selection, const
p.drawEllipse(inner);
}
p.setOpacity((radial && loaded) ? _radial->opacity() : 1);
const auto icon = [&] {
if (_data->loading() || _data->uploading()) {
return &(selected ? st::historyFileThumbCancelSelected : st::historyFileThumbCancel);
} else if (loaded || _data->canBePlayed()) {
return &(selected ? st::historyFileThumbPlaySelected : st::historyFileThumbPlay);
}
return &(selected ? st::historyFileThumbDownloadSelected : st::historyFileThumbDownload);
return &(selected ? st::historyFileThumbCancelSelected : st::historyFileThumbCancel);
}();
icon->paintInCenter(p, inner);
if (radial) {
@ -510,6 +509,7 @@ void Video::paint(Painter &p, const QRect &clip, TextSelection selection, const
_radial->draw(p, rinner, st::msgFileRadialLine, selected ? st::historyFileThumbRadialFgSelected : st::historyFileThumbRadialFg);
}
}
p.setOpacity(1);
const auto checkDelta = st::overviewCheckSkip + st::overviewCheck.size;
const auto checkLeft = _width - checkDelta;