From f2a7cf5c647b904d4248ea03463d4483e146310e Mon Sep 17 00:00:00 2001 From: John Preston Date: Fri, 15 Mar 2019 00:00:24 +0400 Subject: [PATCH] Improve shared videos design. --- .../icons/overview_video_download.png | Bin 0 -> 156 bytes .../icons/overview_video_download@2x.png | Bin 0 -> 221 bytes .../icons/overview_video_download@3x.png | Bin 0 -> 438 bytes .../Resources/icons/overview_video_play.png | Bin 0 -> 175 bytes .../icons/overview_video_play@2x.png | Bin 0 -> 321 bytes .../icons/overview_video_play@3x.png | Bin 0 -> 422 bytes Telegram/SourceFiles/app.cpp | 2 + Telegram/SourceFiles/app.h | 2 + .../media/view/media_view_overlay_widget.cpp | 10 ++-- Telegram/SourceFiles/overview/overview.style | 9 +++ .../SourceFiles/overview/overview_layout.cpp | 56 +++++++++--------- 11 files changed, 45 insertions(+), 34 deletions(-) create mode 100644 Telegram/Resources/icons/overview_video_download.png create mode 100644 Telegram/Resources/icons/overview_video_download@2x.png create mode 100644 Telegram/Resources/icons/overview_video_download@3x.png create mode 100644 Telegram/Resources/icons/overview_video_play.png create mode 100644 Telegram/Resources/icons/overview_video_play@2x.png create mode 100644 Telegram/Resources/icons/overview_video_play@3x.png diff --git a/Telegram/Resources/icons/overview_video_download.png b/Telegram/Resources/icons/overview_video_download.png new file mode 100644 index 0000000000000000000000000000000000000000..034084c3f39750589b8dab3025668fed984be4f6 GIT binary patch literal 156 zcmeAS@N?(olHy`uVBq!ia0vp^AT|#N8<337)>#0gl097a@Oc~S*+KY|3{(gghayAJ>gfA z*#tlGh4!}ioP6XtZ;5xzQ`b+o&%2!8XrJ~@{2o&RyOeJ+>;LnK&OqxJJYD@<);T3K F0RZ-BeaA0pob2yKDb2>V0s_bS1F}FV~k+tVLg8NUk|_o Xji{Cnpc*a^00000NkvXXu0mjf!Qfbv literal 0 HcmV?d00001 diff --git a/Telegram/Resources/icons/overview_video_download@3x.png b/Telegram/Resources/icons/overview_video_download@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..44befb1675b8fdcc3fe2fa8e84cbd3747954bbdb GIT binary patch literal 438 zcmV;n0ZIOeP)?Kyl%*s31Q~@NrVuPH-x?eN$TNk0 zF20*Akt8XfPyLJ(-~wEL3vdDce6V!Bd|qcioJA=;@7S^|5=GI|p{LV{^!xqGOYru3 zJsgim;R`=&4u=D}-R^H0xL84_)4_hf&mFqk?Z6njwvfL{(r&l0-EMP(ZZ;d3rg=|) zZhffLYGJ)z{~NkmtzZ~NoOj)qF+li9ah&h7*S774 g&h26_e@zG>UuOG{ibPkR>i_@%07*qoM6N<$g0R=Y(*OVf literal 0 HcmV?d00001 diff --git a/Telegram/Resources/icons/overview_video_play.png b/Telegram/Resources/icons/overview_video_play.png new file mode 100644 index 0000000000000000000000000000000000000000..ea6f797066aad752328ad5102d8c423eed68c677 GIT binary patch literal 175 zcmeAS@N?(olHy`uVBq!ia0vp^96-#&!3HGb=lz)rq{=*99780g)=t>XcSM1QMSQmZ z^2LjtOgg&!ofj=#bW3Ab_d6#!<(<-%Z%r9G#Fu>Uvs9l`{9WunhvEf^!|$)1FHk&I zF)b`n{kczQtr%aX_>-4)p?l>j1G1NH{bsjl%BR!uty6?tpZrP7?oH;YdcR(lp=Q0* a0k)W@+a5D$&F}`gfWgz%&t;ucLK6U67(*EV literal 0 HcmV?d00001 diff --git a/Telegram/Resources/icons/overview_video_play@2x.png b/Telegram/Resources/icons/overview_video_play@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..4560039a60918b04a83f0d44bb9556aba0cc1d19 GIT binary patch literal 321 zcmV-H0lxl;P)corbq}87jW`C|66iJz$wcTbzK)1a44l{7>2ljQ&rV_C3gk$Jfr7% zPr>a`mSq_TA+LkG6?9#PrfG^@p>12VZCmUS>$*nEvc%fB+rFy;K0unLiH&km6vzL7 z$M0S6O_pWn$vlQ(z-3w9lH)i=RaLJo6yNu;?|Yo437e)t*LAONBLMv8tqcHPwBr^} T4w?Y&00000NkvXXu0mjflD2`P literal 0 HcmV?d00001 diff --git a/Telegram/Resources/icons/overview_video_play@3x.png b/Telegram/Resources/icons/overview_video_play@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..5204ccc5021b0f4b7bb995d84f5fcf987fc9e91c GIT binary patch literal 422 zcmV;X0a^ZuP)P2-?|L+N86Mq|?I6Qc-LagcOo4g@~Z! zKL)gr3wIbZ2M71TG+X@N!tTx_3K4+>`H&2!UlG*nb@F|mZnqm9k4JJ{mn_R7RaKKQ z?Du;_aX1`MtJQEnqxcn>e&>3d9WaI?QWHLcEo0StVv)K%qrpXDI#bNGU5QnY~``wcu9-olYlS_)h}<@M<=j z@x!@-Aczc~PN%3;D({7JwcBl+&u3gN7p&K742MHhtJU{|@Adx!@;yZK3EE;F`wI`| Q#sB~S07*qoM6N<$f@QV1uK)l5 literal 0 HcmV?d00001 diff --git a/Telegram/SourceFiles/app.cpp b/Telegram/SourceFiles/app.cpp index 7db50373b..6a6aedabc 100644 --- a/Telegram/SourceFiles/app.cpp +++ b/Telegram/SourceFiles/app.cpp @@ -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); diff --git a/Telegram/SourceFiles/app.h b/Telegram/SourceFiles/app.h index 45ce3669e..f0caa71a0 100644 --- a/Telegram/SourceFiles/app.h +++ b/Telegram/SourceFiles/app.h @@ -35,6 +35,8 @@ enum RoundCorners { SelectedOverlayLargeCorners, DateCorners, DateSelectedCorners, + OverviewVideoCorners, + OverviewVideoSelectedCorners, ForwardCorners, MediaviewSaveCorners, EmojiHoverCorners, diff --git a/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp b/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp index bf690b872..65ddef09d 100644 --- a/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp +++ b/Telegram/SourceFiles/media/view/media_view_overlay_widget.cpp @@ -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 { diff --git a/Telegram/SourceFiles/overview/overview.style b/Telegram/SourceFiles/overview/overview.style index b108899f3..e54ed468b 100644 --- a/Telegram/SourceFiles/overview/overview.style +++ b/Telegram/SourceFiles/overview/overview.style @@ -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; diff --git a/Telegram/SourceFiles/overview/overview_layout.cpp b/Telegram/SourceFiles/overview/overview_layout.cpp index 2e1f1fb41..26bc18795 100644 --- a/Telegram/SourceFiles/overview/overview_layout.cpp +++ b/Telegram/SourceFiles/overview/overview_layout.cpp @@ -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;