feat(YouTube): Match overlay icons style to YouTube

[MarcaDian]

All custom icons now have a different design. It is necessary to bring it to one design.

Regular player

Fullscreen player

The stroke swipes overlay is added in this screenshot specially for a preview, it is not present in the program

Last changes here - #3023 (comment)

Also close #157

[LisoUseInAIKyrios]

The icons look more consistent and visually don't block the video as much as the prior icons.

My only suggestion, is if the clock part of the copy timestamp icon could be slightly smaller or more minimal. The clock is large and visually blocks more of the video compared to the old icon. It looks slightly out of place compared to all the other icons with their thin lines.

[oSumAtrIX]

Are these icons from some official icon pack? If not, a well-known icon pack library should be used so that they can be updated and maintained by the icon packers

[MarcaDian]

I used icons from official Google icons pack https://fonts.google.com/icons
except copy timestamp, it i made myself by combining the copy content icon and the schedule icon
and Sponsoblock, by combining shield icon and play icon.

Clock in copy timestamp can be made outlined, not filled

[MarcaDian]

1. filled smaller clock

2. outlined clock

3. bold outlined clock

It is also possible to outline the triangle in the Sponsorblock shield so that it does not stand out next to the settings icon.
Or use the original one at all, if this is usually possible, but it has a slightly different design compared to the Google icons.

[LisoUseInAIKyrios]

Clock 2 or 3 looks great.

Using these files requires mentioning the source somewhere in each drawable xml files, and adding the license file to the project and including the license file with the built patches jar:
https://github.com/google/material-design-icons/blob/master/LICENSE

[LisoUseInAIKyrios]

Actually, the GitHub license instructions state the license file does not need to be included, if a boiler plate text is added to each file (since the boilerplate includes a link to the license).
Also include a link to the original file on GitHub, and describe any changes made (if any changes exist).

Boiler plate text to add to each icon xml file:

(GitHub link to original file used)
(Description of changes made, if any)

Copyright 2024 Google

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

[LisoUseInAIKyrios]

I would use a permanent link to that file revision, in case the original image is later updated (select permalink from GitHub options):

https://github.com/google/material-design-icons/blob/9beae745bb758f3ad56654fb377ea5cf62be4915/font/MaterialIconsOutlined-Regular.otf

And use a copyright year of whatever year each file was originally created (2022 for that file)

[MarcaDian]

Oh, there Google symbols, i used wrong file.
For example for content_copy as copy without timestamp

<!--
   https://github.com/google/material-design-icons/blob/9beae745bb758f3ad56654fb377ea5cf62be4915/symbols/android/content_copy/materialsymbolsoutlined/content_copy_wght200gradN25_24px.xml
   The icon has been resized


Copyright 2022 Google

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:tint="#FFFFFF"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
    <path
            android:fillColor="@android:color/white"
            android:pathData="m 9.7348145,16.94238 q -0.5966913,0 -1.0062178,-0.39988 Q 8.319101,16.14259 8.319101,15.5599 V 5.88248 q 0,-0.58269 0.4094957,-0.9826 Q 9.1381232,4.5 9.7348145,4.5 h 7.1494615 q 0.596701,0 1.006218,0.39988 Q 18.3,5.29979 18.3,5.88248 v 9.67742 q 0,0.58269 -0.409506,0.9826 -0.409517,0.39988 -1.006218,0.39988 z m 0,-0.82949 h 7.1494615 q 0.212367,0 0.389322,-0.1728 0.176965,-0.17283 0.176965,-0.38019 V 5.88248 q 0,-0.20738 -0.176965,-0.38019 -0.176955,-0.1728 -0.389322,-0.1728 H 9.7348145 q -0.212336,0 -0.389322,0.1728 Q 9.1685373,5.6751 9.1685373,5.88248 v 9.67742 q 0,0.20736 0.1769552,0.38019 0.176986,0.1728 0.389322,0.1728 z M 7.1157237,19.5 Q 6.519022,19.5 6.1094957,19.10009 5.7,18.70021 5.7,18.1175 V 7.61058 H 6.5494363 V 18.1175 q 0,0.20738 0.1769552,0.38018 0.1769655,0.17281 0.3893322,0.17281 H 15.114611 V 19.5 Z M 9.1685373,16.11289 V 5.32949 Z"/>
</vector>
-->

[MarcaDian]

i have a problem

i can`t copy link to sources files as github shows only 1000 files

[oSumAtrIX]

You can use git or GitHub dev by pressing . (Dot) On your keyboard any where in the repository.

[MarcaDian]

What about Sponsorblock icon?
What if do that:

[LisoUseInAIKyrios]

I think the solid triangle looks a little better (the icon shown in the first post). A solid triangle also matches the original SB logo as well.

The original SB shield has a slightly different shape on the outside (3 curves, instead of 4 like the existing ReVanced logo has), but that's minor and no different from the existing icon used here.

[oSumAtrIX]

I tried checking for the branding guidelines of SponsorBlock and could not find any. I'll reach out to SponsorBlock to clarify the question.

[LisoUseInAIKyrios]

If an existing svg was to be used, this might work: https://github.com/ajayyy/SponsorBlock/blob/master/public/icons/PlayerStartIconSponsorBlocker.svg

[oSumAtrIX]

Works:

[MarcaDian]

I have inverted this icon.
It looks a little unusual, but this icon clearly indicates that this is a Sponsorblock, and not some obscure shield that the user is afraid to click on, so as not to break something. Maybe it needs to be reduced a little? now it is the same height as the voting button, but it seems to me that it is larger than the settings icon

Sorry for my English, I'm still working with the translator =)

[LisoUseInAIKyrios]

I agree it could be a little smaller, so it is the same height as the settings icon.

[MarcaDian]

All icons 20x20 except for the icons near seekbar, they are 15x15 as it was in Revanced before.

[anddea]

Second row in the "New Segment" pop-up is inconsistent. When you make icons you have to understand the game (the principle) of perspective. Even though you think that the same size for all icons should work, it won't.

Let's take a look at Google Material Icons how they meant it to be.

Example: You v. Google Material Icons

Left - your Adjust and Edit icons, right - Google Material Icons

As you can see Edit icon should be smaller than Adjust. "Edit" lines/strokes (they are not strokes but let's call it this way) are a little thicker than Adjust's. But the icon itself for Edit is too narrow. Overall, icons are big, would be better to make them smaller. Note that in my example image I sent is the actual icon size for 24dp. Although it's fine to adjust icons how you want them to be.

Additionally, your Compare button is slightly bigger than it should be

Example: Compare v. Adjust

Time/clock icon in copy with timestamp is too close to the edges of copy icon but it's not that big of a deal.

Also, imo it's better to start SVG path with big M - absolute path starting point, rather than with small m - relative.

If you need any help, let me know, but I guess you'd like to take this challenge on your own.
Btw, anyone can use my icons if needed.

Example

[oSumAtrIX]

The PR has been merged already so changes are too late now, but if you like, either open an issue or PR