Improve shared videos design.

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);

Telegram/SourceFiles/app.h

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

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 {

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;

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;