Update Airplay icon

[SteveMicroNova]

What does this change intend to accomplish?

We noted that our airplay logo was out of date
It is now up to date using an official airplay logo

Sources:
Apple
Where I got the icon

Before:

After:

Checklist

• Have you tested your changes and ensured they work?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• If applicable, have you updated the CHANGELOG?
• Does your submission pass linting & tests? You can test on localhost using ./scripts/test
• If this is a UI change, have you tested it across multiple browser platforms on both desktop and mobile?

[gorski123]

I think I prefer the circular lines with the triangle, or at the very least the box in blue?

[linknum23]

Any reason this is svg instead of png?

[SteveMicroNova]

We use the icons in both large and small formats, svgs are better at not having jagged edges when you use CSS to scale them like that

However, I also grabbed a PNG because without one I'd have to change every other stream icon to SVG as well, and that's a larger lift than this issue deserved at this moment

I've decided to skip having two different image files and just keep it to PNGs

[linknum23]

What is the difference in intent between the 2 icons? I assume one makes more sense for amplipi than the other.

[SteveMicroNova]

What is the difference in intent between the 2 icons? I assume one makes more sense for amplipi than the other.

The triangle with three rings is for audio, the triangle in a rectangle is for audio and video. Not everywhere uses it as that, for example Pandora does not use any video but still uses that icon; I also used that icon because it was what was available in my trusted icon libraries for airplay
I've now replaced it with the Airplay Audio icon that I recolored blue by Jason's request above

[SteveMicroNova]

To my understanding, Lincoln is taking on the task of finding a better icon that has better line thickness and a proper color
This PR is likely blocked by that

[klay2000]

I'm going to spend a few minutes looking into this.

[klay2000]

According to the Apple human interface guidelines for Airplay these are the two icons. In quickly skimming through them I didn't see anything specifying that we should use either the radiating circles or rounded rectangle for audio however the consensus seems to be the radiating circles icon is for audio, so I believe it is most correct for us to use that.

As for the line weight, these are the icons apple provides, I doubt we're going to find anything with a finer line and if we do this is still in my opinion the best icon to use.

The color is a bit more complicated, Apple's guidelines basically say to use whatever you use for other services. We use the full color logo for Pandora but for everything else we use logos with at most 2 colors. I think we should use the blue as shown in the screenshots above but Apple seems to not specify what color to use, just that it's colored. Perhaps in the future we should make our iconography a little more concise by finding a 2 color version of the pandora logo and keeping the icons we have control over within a consistent color palate since at the moment some icons have very similar colors and I think this looks bad.

I definitely went a little crazy on this but overall I think we should just stick with the radiating circles icon in blue.