Play icon is missing in video preview

[darguez]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• Nextcloud Server is running on 64bit capable CPU, PHP and OS.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

After enable video previews (NC24), It is not possible to distinguish between photo and video previews. The video preview should show a centered play icon (the android app does show it!). Am I missing something?

Steps to reproduce

1. Enable video previews in config.php
2. Open folder with images and videos in the web
3. Preview are quite similiar and it is not easy to distinguish between a image and a video

Expected behavior

The video preview should display a center play icon.

Installation method

Manual installation

Operating system

Debian/Ubuntu

PHP engine version

PHP 7.4

Web server

Apache (supported)

Database engine version

MariaDB

Is this bug present after an update or on a fresh install?

No response

Are you using the Nextcloud Server Encryption module?

Encryption is Disabled

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

No response

List of activated Apps

- accessibility: 1.10.0
  - activity: 2.16.0
  - circles: 24.0.0
  - cloud_federation_api: 1.7.0
  - comments: 1.14.0
  - contactsinteraction: 1.5.0
  - dashboard: 7.4.0
  - dav: 1.22.0
  - deck: 1.7.1
  - federatedfilesharing: 1.14.0
  - federation: 1.14.0
  - files: 1.19.0
  - files_downloadactivity: 1.13.0
  - files_pdfviewer: 2.5.0
  - files_rightclick: 1.3.0
  - files_sharing: 1.16.2
  - files_trashbin: 1.14.0
  - files_versions: 1.17.0
  - files_videoplayer: 1.13.0
  - firstrunwizard: 2.13.0
  - logreader: 2.9.0
  - lookup_server_connector: 1.12.0
  - metadata: 0.16.0
  - nextcloud_announcements: 1.13.0
  - nextcloudpi: 0.0.1
  - notifications: 2.12.0
  - notify_push: 0.4.0
  - oauth2: 1.12.0
  - password_policy: 1.14.0
  - photos: 1.6.0
  - privacy: 1.8.0
  - provisioning_api: 1.14.0
  - recommendations: 1.3.0
  - serverinfo: 1.14.0
  - settings: 1.6.0
  - sharebymail: 1.14.0
  - support: 1.7.0
  - survey_client: 1.12.0
  - systemtags: 1.14.0
  - text: 3.5.1
  - theming: 1.15.0
  - twofactor_backupcodes: 1.13.0
  - user_status: 1.4.0
  - viewer: 1.8.0
  - weather_status: 1.4.0
  - workflowengine: 2.6.0

Nextcloud Signing status

No response

Nextcloud Logs

No response

Additional info

No response

[szaimen]

I think this is a feature request

[qibao07]

This feature is quite useful, and I found a temporary solution.

1. Find a transparent play button image.
2. Install Custom CSS.
3. Set the css and replace the image url in the first step.

/* NC 27 */
/*
#app-content-files > table > tbody > tr[data-mime^="video/"] > td.filename.ui-draggable.ui-draggable-handle > a > div > div::after {
	width: 50%;
	height: 50%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(https://gitea.chenweiwen.top:57443/qibao/file-repo/raw/branch/master/static/pngsucai_112001_ca4dea.png);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
	border-radius: 5px;
}
*/

/* NC 28-29 */
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".mp4" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".webm" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".ogv" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".avi" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".mpeg" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".mpg" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".mov" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".flv" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".3gp" i] > td.files-list__row-name > span::before,
#app-content-vue > div.files-list > table > tbody > tr[data-cy-files-list-row-name$=".3g2" i] > td.files-list__row-name > span::before{
    position: absolute;
    background-size: 100% 100%;
    background-image: url(https://gitea.chenweiwen.top:57443/qibao/file-repo/raw/branch/master/static/pngsucai_112001_ca4dea.png);
    content: "";
    width: calc(var(--icon-preview-size) / 1.3);
    height: calc(var(--icon-preview-size) / 1.3);
}