This link has been sent to you via a whisper rather than standard chat, and has not been checked or approved of by any moderators or staff members. Please treat this link with caution and do not visit it if you do not trust the sender.', @@ -20,6 +21,7 @@ var FFZ = window.FrankerFaceZ, LINK = /(?:https?:\/\/)?(?:[-a-zA-Z0-9@:%_\+~#=]+\.)+[a-z]{2,6}\b(?:[-a-zA-Z0-9@:%_\+.~#?&\/\/=()]*)/g, + TIME_REPLACER = /
' : '') + 'Destination: ' + utils.sanitize(last_url[1]); + } + + if ( data.unsafe ) { + var reasons = _.pluck(data.urls, 2).filter((function(x){return x})).uniq().join(", "); + content = "Caution: This URL is on Google's Safe Browsing list for: " + + utils.sanitize(reasons.toLowerCase()) + (content.length ? '
' + content : ''); + } + + if ( el && el.classList.contains('warn-link') ) + content += (content.length ? '
' : '') + EXPLANATION_WARN; + + var show_image = this.settings.link_image_hover && (data.image_safe || this.settings.image_hover_all_domains); + + if ( show_image ) { + if ( data.image ) + if ( data.image_iframe ) + content = image_iframe(data.image) + content; + else + content = '
Game: ' + utils.sanitize(data.game) - }); - }); - - } else if ( video_info ) { - utils.api.get("videos/" + video_info[1], undefined, {version: 5}) - .then(function(data) { - success(true, { - image: data.preview.large, - image_iframe: false, - html: '' + utils.sanitize(data.title) + ' [' + utils.time_to_string(data.length) + ']' + - 'Channel: ' + utils.sanitize(data.channel.display_name) + - '
Game: ' + utils.sanitize(data.game) - })}); - - } else - this.ws_send("get_link", href, success); - } - } + var info = this.get_link_info(href); + if ( info && info.unsafe ) + cls += ' unsafe-link'; } // Deleted Links diff --git a/src/ui/dark.js b/src/ui/dark.js index 4cee954b..0c6089ed 100644 --- a/src/ui/dark.js +++ b/src/ui/dark.js @@ -114,6 +114,12 @@ FFZ.settings_info.twitch_chat_dark = { }; +FFZ.settings_info.twitch_theme = { + value: '', + visible: false +}; + + FFZ.settings_info.dark_twitch = { type: "boolean", value: false, @@ -139,14 +145,25 @@ FFZ.settings_info.dark_twitch = { (this.is_clips ? document.querySelector('html') : document.body).classList.toggle("ffz-dark", val); - var Settings = utils.ember_settings(); + var Settings = utils.ember_settings(), + ThemeManager = utils.ember_lookup('service:theme-manager'); if ( val ) { this._load_dark_css(); - Settings && this.settings.set('twitch_chat_dark', Settings.get('darkMode')); - Settings && Settings.set('darkMode', true); - } else - Settings && Settings.set('darkMode', this.settings.twitch_chat_dark); + if ( ThemeManager ) { + this.settings.set('twitch_theme', ThemeManager.get('themes.activeTheme')); + ThemeManager.set('themes.activeTheme', 'theme--dark'); + } + if ( Settings ) { + this.settings.set('twitch_chat_dark', Settings.get('darkMode')); + Settings.set('darkMode', true); + } + } else { + if ( ThemeManager ) + ThemeManager.set('themes.activeTheme', this.settings.twitch_theme); + if ( Settings ) + Settings.set('darkMode', this.settings.twitch_chat_dark); + } // Try coloring chat replay window.jQuery && jQuery('.chatReplay').toggleClass('dark', val || false); @@ -204,15 +221,13 @@ FFZ.prototype.setup_dark = function() { if ( ! this.settings.dark_twitch ) return; - var Settings = utils.ember_settings(); - if ( Settings ) { - try { - Settings.set('darkMode', true); - } catch(err) { - this.error("Unable to set the darkMode setting because it isn't named what we expect. WTF?"); - } - } else - this.error("Unable to load the Ember settings controller."); + var Settings = utils.ember_settings(), + ThemeManager = utils.ember_lookup('service:theme-manager'); + + if ( ThemeManager ) { + ThemeManager.set('themes.activeTheme', 'theme--dark'); + } else if ( Settings ) + Settings.set('darkMode', true); this._load_dark_css(); } diff --git a/src/ui/tooltips.js b/src/ui/tooltips.js index 93c1fdf9..0ad6b095 100644 --- a/src/ui/tooltips.js +++ b/src/ui/tooltips.js @@ -10,7 +10,12 @@ var FFZ = window.FrankerFaceZ, FFZ.prototype.fix_tooltips = function() { // Add handlers to FFZ's tooltip classes. jQuery(".html-tooltip").tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); - jQuery(".ffz-tooltip").tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); + jQuery(".ffz-tooltip").tipsy({ + live: true, + html: true, + className: this.render_tooltip_class(), + title: this.render_tooltip(), + gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); // First, override the tooltip mixin. diff --git a/style.css b/style.css index 62806a93..ab8ae672 100644 --- a/style.css +++ b/style.css @@ -1718,6 +1718,10 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator { position: relative; } +.tipsy-inner .faded { + opacity: 0.7; +} + .ffz-follow-tip .tipsy-inner { width: 316px; } @@ -1750,6 +1754,218 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator { white-space: pre-wrap; } + +.ffz-rich-tip .tipsy-inner { + max-width: 340px; + width: 340px; + text-align: left; + position: relative; + + padding: 8px; +} + +.ffz-rich-tip .body { line-height: 1.5em } + +.ffz-rich-tip .tweet-heading:before { + content: ''; + position: absolute; + top: 24px; + right: 24px; + width: 20px; + height: 16px; + background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px; +} + +.ffz-rich-tip .stats:after, +.ffz-rich-tip .heading:after { + content: ''; + display: table; + clear: both; +} + +.ffz-rich-tip .avatar { + float: left; + margin-right: 8px; + height: 48px; + width: 48px; +} + +.ffz-rich-tip .tweet-heading .avatar { + border-radius: 50%; +} + +.ffz-rich-tip .display-name { + padding-top: 3px; + font-size: 14px; + display: block; +} + +.ffz-rich-tip .display-name.big-name { + font-size: 20px; + padding-top: 18px; +} + +.ffz-rich-tip .quoted .display-name { + padding: 0 5px 0 0; + display: inline; + font-size: 12px; +} + +.ffz-rich-tip .twitch-heading .badge.verified { + height: 12px; + width: 12px; + margin: 2px 0 -1px 5px; + background: url("https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/1"); + background-size: contain; + display: inline-block; +} + +.ffz-rich-tip .twitch-heading .big-name .badge.verified { + height: 18px; + width: 18px; + margin: 1px 0 0 10px; +} + +.ffz-rich-tip .tweet-heading .badge { + height: 12px; + width: 12px; + margin: 2px 0 -1px 5px; + background: url("//cdn.frankerfacez.com/script/twitter_sprites.png"); + display: inline-block; +} + +.ffz-rich-tip .badge.verified { + background-position: 0 -15px; +} + +.ffz-rich-tip .badge.translator { + background-position: -12px -15px; +} + +.ffz-rich-tip .badge.protected { + background-position: -24px -15px; + width: 14px; +} + +.ffz-rich-tip .emoji { + height: 1em; + vertical-align: middle; +} + +.ffz-rich-tip .quoted > div:not(:first-child), +.ffz-rich-tip .tipsy-inner > div:not(:first-child) { + margin-top: 8px; +} + +.ffz-rich-tip .quote-heading + .body, +.ffz-rich-tip .replying + .body { + margin-top: 0 !important; +} + +.ffz-rich-tip .replying { + opacity: 0.6; + font-size: 10px; +} + +.ffz-rich-tip .quoted .body, +.ffz-rich-tip .stats, +.ffz-rich-tip .username { opacity: 0.6 } + +.ffz-rich-tip .stats { display: flex } +.ffz-rich-tip time { flex-grow: 1 } + +.ffz-rich-tip .tweet-stats .stat:before { + content: ''; + display: inline-block; + background: url("//cdn.frankerfacez.com/script/twitter_sprites.png"); + margin: 0 5px 0 10px; +} + +.ffz-rich-tip .stat.likes:before { + width: 17px; height: 14px; + margin-bottom: -3px; +} + +.ffz-rich-tip .stat.retweets:before { + width: 20px; height: 12px; + background-position: -34px 0; + margin-bottom: -2px; +} + +.ffz-rich-tip .media { position: relative; text-align: center } + +.ffz-rich-tip .media:not([data-count="1"]) { + display: flex; + margin: 8px -5px -5px 0; + flex-flow: column wrap; + height: 329px; +} + +.ffz-rich-tip .media video { + width: 100%; + max-height: 324px; +} + +.ffz-rich-tip .media[data-count="4"] { flex-flow: row wrap } + +.ffz-rich-tip .media[data-count="2"] { height: 164.5px } +.ffz-rich-tip .media img { max-height: 324px } + +.ffz-rich-tip .quoted .media:not([data-count="1"]) { height: 150px } +.ffz-rich-tip .quoted .media[data-count="2"] { height: 150px } +.ffz-rich-tip .quoted .media video, +.ffz-rich-tip .quoted .media img { max-height: 150px } + +.ffz-rich-tip .media span { + background: no-repeat center center; + background-size: cover; +} + +.ffz-rich-tip .media[data-count="2"] span, +.ffz-rich-tip .media[data-count="3"] span, +.ffz-rich-tip .media[data-count="4"] span { + width: calc(50% - 5px); + height: calc(50% - 5px); + margin: 0 5px 5px 0; +} + +.ffz-rich-tip .media[data-count="2"] span, +.ffz-rich-tip .media[data-count="3"] span:first-of-type { + height: 100%; +} + +.ffz-rich-tip .profile-stats { + display: flex; + flex-flow: row; +} + +.ffz-rich-tip .profile-stats div { + flex-grow: 1; + font-size: 16px; +} + +.ffz-rich-tip .profile-stats span { + display: block; + font-size: 12px; + opacity: 0.7; +} + +.ffz-rich-tip .quoted { + border: 1px solid #474747; + border-radius: 5px; + padding: 8px; +} + +.ffz-rich-tip .media[data-type="video"]:after { + position: absolute; + content: ''; + width: 64px; height: 64px; + top: calc(50% - 32px); + left: calc(50% - 32px); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z'/%3E%3C/svg%3E"); +} + + /* Menu Page Loader */ .ffz-ui-sub-menu-page:empty, @@ -1759,6 +1975,7 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator { .ffz-loading-spinner:after, .chat-history.loading:after, +.ffz-async-tooltip:empty:after, .ffz-ui-sub-menu-page:empty::after, .ffz-ui-menu-page:empty::after { content: " "; @@ -1772,6 +1989,10 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator { animation: ffz-rotateplane 1.2s infinite linear; } +.ffz-async-tooltip:empty:after { + margin: 10px 50px; +} + @keyframes ffz-rotateplane { 0% { transform: perspective(120px) rotateY(90deg) } 25% { transform: perspective(120px) rotateY(180deg) }