Updated player icons for Twitch rebrand (#680)

* Updated PIP button for Twitch rebrand * Readded docs icon Dropped due to fontello session shenanigans * Readded reset player glyphs
2025-06-27 21:05:53 +00:00 · 2019-10-19 12:40:04 +11:00 · 2019-10-19 12:40:04 +11:00 · a38f5ce9d5
commit a38f5ce9d5
parent 91826e0005
14 changed files with 109 additions and 21 deletions
--- a/fontello.config.json
+++ b/fontello.config.json
@ -574,11 +574,67 @@
      "code": 59446,
      "src": "fontawesome"
    },
+    {
+      "uid": "83ef41f6581f1249dad29440dcc98c7d",
+      "css": "t-pip-active",
+      "code": 59447,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M450 450H800V250A100 100 0 0 0 700 150H100A100 100 0 0 0 0 250V750A100 100 0 0 0 100 850H350V550A100 100 0 0 1 450 450ZM450 550V850H700A100 100 0 0 0 800 750V550Z",
+        "width": 800
+      },
+      "search": [
+        "picture-in-picture active"
+      ]
+    },
+    {
+      "uid": "27e2008f5a55874ebec555ab5a8bc955",
+      "css": "t-pip-inactive",
+      "code": 59448,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M700 150H100A100 100 0 0 0 0 250V750A100 100 0 0 0 100 850H700A100 100 0 0 0 800 750V250A100 100 0 0 0 700 150ZM100 250H700V450H450A100 100 0 0 0 350 550V750H100ZM450 750V550H700V750Z",
+        "width": 800
+      },
+      "search": [
+        "picture-in-picture inactive"
+      ]
+    },
    {
      "uid": "c8585e1e5b0467f28b70bce765d5840c",
      "css": "docs",
      "code": 61637,
      "src": "fontawesome"
+    },
+    {
+      "uid": "0a277ae87adce035efd1b07fe62cbd1c",
+      "css": "t-reset-clicked",
+      "code": 59449,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M214.6 435.4L29.3 250 214.6 64.6 285.4 135.4 220.7 200H650A100 100 0 0 1 750 300V500H650V300H220.7L285.4 364.6ZM585.4 564.6L514.6 635.4 579.3 700H150V500H50V700A100 100 0 0 0 150 800H579.3L514.6 864.6 585.4 935.4 770.7 750Z",
+        "width": 800
+      },
+      "search": [
+        "reset player clicked"
+      ]
+    },
+    {
+      "uid": "da98b2090e1c8cb693c9a12c629c407d",
+      "css": "t-reset",
+      "code": 59450,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M650 200A100 100 0 0 1 750 300V800H650V300H470.7L535.4 364.6 464.6 435.4 279.3 250 464.6 64.6 535.4 135.4 470.7 200ZM264.6 635.4L329.3 700H150V200H50V700A100 100 0 0 0 150 800H329.3L264.6 864.6 335.4 935.4 520.7 750 335.4 564.6Z",
+        "width": 800
+      },
+      "search": [
+        "reset player unclicked"
+      ]
    }
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "frankerfacez",
-  "version": "4.13.0",
+  "version": "4.14.6",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/res/font/ffz-fontello.eot
+++ b/res/font/ffz-fontello.eot
--- a/res/font/ffz-fontello.svg
+++ b/res/font/ffz-fontello.svg
@ -116,6 +116,14 @@

 <glyph glyph-name="left-open" unicode="&#xe836;" d="M654 682l-297-296 297-297q10-10 10-25t-10-25l-93-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25t11 25l414 414q10 11 25 11t25-11l93-93q10-10 10-25t-10-25z" horiz-adv-x="714.3" />

+<glyph glyph-name="t-pip-active" unicode="&#xe837;" d="M450 400h350v200a100 100 0 0 1-100 100h-600a100 100 0 0 1-100-100v-500a100 100 0 0 1 100-100h250v300a100 100 0 0 0 100 100z m0-100v-300h250a100 100 0 0 1 100 100v200z" horiz-adv-x="800" />
+
+<glyph glyph-name="t-pip-inactive" unicode="&#xe838;" d="M700 700h-600a100 100 0 0 1-100-100v-500a100 100 0 0 1 100-100h600a100 100 0 0 1 100 100v500a100 100 0 0 1-100 100z m-600-100h600v-200h-250a100 100 0 0 1-100-100v-200h-250z m350-500v200h250v-200z" horiz-adv-x="800" />
+
+<glyph glyph-name="t-reset-clicked" unicode="&#xe839;" d="M215 415l-186 185 186 185 70-70-64-65h429a100 100 0 0 0 100-100v-200h-100v200h-429l64-65z m370-130l-70-70 64-65h-429v200h-100v-200a100 100 0 0 1 100-100h429l-64-65 70-70 186 185z" horiz-adv-x="800" />
+
+<glyph glyph-name="t-reset" unicode="&#xe83a;" d="M650 650a100 100 0 0 0 100-100v-500h-100v500h-179l64-65-70-70-186 185 186 185 70-70-64-65z m-385-435l64-65h-179v500h-100v-500a100 100 0 0 1 100-100h179l-64-65 70-70 186 185-186 185z" horiz-adv-x="800" />
+
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

 <glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
--- a/res/font/ffz-fontello.ttf
+++ b/res/font/ffz-fontello.ttf
--- a/res/font/ffz-fontello.woff
+++ b/res/font/ffz-fontello.woff
--- a/res/font/ffz-fontello.woff2
+++ b/res/font/ffz-fontello.woff2
--- a/src/sites/twitch-twilight/modules/player.jsx
+++ b/src/sites/twitch-twilight/modules/player.jsx
@ -779,10 +779,10 @@ export default class Player extends Module {

 		const pip_active = !!document.pictureInPictureElement

-		icon.classList.toggle('ffz-i-window-restore', ! pip_active);
-		icon.classList.toggle('ffz-i-window-maximize', pip_active);
+		icon.classList.toggle('ffz-i-t-pip-inactive', ! pip_active);
+		icon.classList.toggle('ffz-i-t-pip-active', pip_active);

-		btn.setAttribute('aria-label', tip.textContent = this.i18n.t('player.pip_button', 'Click to Toggle Picture-in-Picture'));
+		btn.setAttribute('aria-label', tip.textContent = this.i18n.t('player.pip_button', 'Picture-in-Picture'));
 	}


@ -840,7 +840,7 @@ export default class Player extends Module {
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
 						<div class="tw-button-icon__icon">
-							<figure class="ffz-i-cancel" />
+							<figure class="ffz-i-t-reset" />
 						</div>
 					</div>
 				</button>)}
@ -861,7 +861,7 @@ export default class Player extends Module {
 		btn.setAttribute('aria-label',
 			tip.textContent = this.i18n.t(
 				'player.reset_button',
-				'Double-Click to Reset Player'
+				'Reset Player (Double-Click)'
 			));
 	}

@ -988,4 +988,4 @@ export default class Player extends Module {

 		return null;
 	}
-}
+}
--- a/src/utilities/ffz-icons.js
+++ b/src/utilities/ffz-icons.js
@ -83,5 +83,9 @@ export default [
 	"youtube-play",
 	"minus",
 	"left-open",
-	"docs"
+	"t-pip-active",
+	"t-pip-inactive",
+	"docs",
+	"t-reset-clicked",
+	"t-reset"
 ];
--- a/styles/fontello/ffz-fontello-codes.scss
+++ b/styles/fontello/ffz-fontello-codes.scss
@ -54,6 +54,10 @@
 .ffz-i-clip:before { content: '\e834'; } /* '' */
 .ffz-i-minus:before { content: '\e835'; } /* '' */
 .ffz-i-left-open:before { content: '\e836'; } /* '' */
+.ffz-i-t-pip-active:before { content: '\e837'; } /* '' */
+.ffz-i-t-pip-inactive:before { content: '\e838'; } /* '' */
+.ffz-i-t-reset-clicked:before { content: '\e839'; } /* '' */
+.ffz-i-t-reset:before { content: '\e83a'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-github:before { content: '\f09b'; } /* '' */
--- a/styles/fontello/ffz-fontello-embedded.scss
+++ b/styles/fontello/ffz-fontello-embedded.scss
--- a/styles/fontello/ffz-fontello-ie7-codes.scss
+++ b/styles/fontello/ffz-fontello-ie7-codes.scss
@ -54,6 +54,10 @@
 .ffz-i-clip { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
 .ffz-i-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe835;&nbsp;'); }
 .ffz-i-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe836;&nbsp;'); }
+.ffz-i-t-pip-active { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe837;&nbsp;'); }
+.ffz-i-t-pip-inactive { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe838;&nbsp;'); }
+.ffz-i-t-reset-clicked { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe839;&nbsp;'); }
+.ffz-i-t-reset { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83a;&nbsp;'); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
 .ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09b;&nbsp;'); }
--- a/styles/fontello/ffz-fontello-ie7.scss
+++ b/styles/fontello/ffz-fontello-ie7.scss
@ -65,6 +65,10 @@
 .ffz-i-clip { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe834;&nbsp;'); }
 .ffz-i-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe835;&nbsp;'); }
 .ffz-i-left-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe836;&nbsp;'); }
+.ffz-i-t-pip-active { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe837;&nbsp;'); }
+.ffz-i-t-pip-inactive { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe838;&nbsp;'); }
+.ffz-i-t-reset-clicked { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe839;&nbsp;'); }
+.ffz-i-t-reset { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe83a;&nbsp;'); }
 .ffz-i-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf08e;&nbsp;'); }
 .ffz-i-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf099;&nbsp;'); }
 .ffz-i-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf09b;&nbsp;'); }
--- a/styles/fontello/ffz-fontello.scss
+++ b/styles/fontello/ffz-fontello.scss
@ -1,11 +1,11 @@
@font-face {
  font-family: 'ffz-fontello';
-  src: url('../font/ffz-fontello.eot?36275888');
-  src: url('../font/ffz-fontello.eot?36275888#iefix') format('embedded-opentype'),
-       url('../font/ffz-fontello.woff2?36275888') format('woff2'),
-       url('../font/ffz-fontello.woff?36275888') format('woff'),
-       url('../font/ffz-fontello.ttf?36275888') format('truetype'),
-       url('../font/ffz-fontello.svg?36275888#ffz-fontello') format('svg');
+  src: url('../font/ffz-fontello.eot?50383568');
+  src: url('../font/ffz-fontello.eot?50383568#iefix') format('embedded-opentype'),
+       url('../font/ffz-fontello.woff2?50383568') format('woff2'),
+       url('../font/ffz-fontello.woff?50383568') format('woff'),
+       url('../font/ffz-fontello.ttf?50383568') format('truetype'),
+       url('../font/ffz-fontello.svg?50383568#ffz-fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'ffz-fontello';
-    src: url('../font/ffz-fontello.svg?36275888#ffz-fontello') format('svg');
+    src: url('../font/ffz-fontello.svg?50383568#ffz-fontello') format('svg');
  }
 }
 */
@ -110,6 +110,10 @@
 .ffz-i-clip:before { content: '\e834'; } /* '' */
 .ffz-i-minus:before { content: '\e835'; } /* '' */
 .ffz-i-left-open:before { content: '\e836'; } /* '' */
+.ffz-i-t-pip-active:before { content: '\e837'; } /* '' */
+.ffz-i-t-pip-inactive:before { content: '\e838'; } /* '' */
+.ffz-i-t-reset-clicked:before { content: '\e839'; } /* '' */
+.ffz-i-t-reset:before { content: '\e83a'; } /* '' */
 .ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-github:before { content: '\f09b'; } /* '' */