ffz support and fix copying of emotes now copies the correct text

web/src/js/actions/loadFfzChannelEmotes.js

@@ -0,0 +1,25 @@
+import setFfzChannelEmotes from "./setFfzChannelEmotes";
+
+export default function (channelid) {
+    return function (dispatch, getState) {
+        return new Promise((resolve, reject) => {
+            fetch("https://api.frankerfacez.com/v1/room/id/" + channelid).then((response) => {
+                if (response.status >= 200 && response.status < 300) {
+                    return response
+                } else {
+                    var error = new Error(response.statusText)
+                    error.response = response
+                    throw error
+                }
+            }).then((response) => {
+                return response.json();
+            }).then((json) => {
+                dispatch(setFfzChannelEmotes(json))
+
+                resolve();
+            }).catch(err => {
+                reject(err);
+            });
+        });
+    };
+}

web/src/js/actions/setFfzChannelEmotes.js

@@ -0,0 +1,6 @@
+export default (ffzChannelEmotes) => (dispatch) => {
+    dispatch({
+        type: 'SET_FFZ_CHANNEL_EMOTES',
+        ffzChannelEmotes: ffzChannelEmotes
+    });
+}

web/src/js/components/LogView.jsx

@@ -5,6 +5,7 @@ import LoadingSpinner from "./LoadingSpinner";
 import AnimateHeight from "./AnimateHeight";
 import { parse } from "irc-message";
 import loadBttvChannelEmotes from "../actions/loadBttvChannelEmotes";
+import loadFfzChannelEmotes from "../actions/loadFfzChannelEmotes";
 
 class LogView extends Component {
 
@@ -15,6 +16,7 @@ class LogView extends Component {
 	};
 
 	loadedBttvEmotes = false;
+	loadedFfzEmotes = false;
 
 	componentDidMount() {
 		if (this.props.log.messages.length > 0) {
@@ -60,6 +62,11 @@ class LogView extends Component {
 			this.loadedBttvEmotes = msgObj.tags["room-id"];
 		}
 
+		if (this.loadedFfzEmotes !== msgObj.tags["room-id"]) {
+			this.props.dispatch(loadFfzChannelEmotes(msgObj.tags["room-id"]));
+			this.loadedFfzEmotes = msgObj.tags["room-id"];
+		}
+
 		const replacements = [];
 
 		if (msgObj.tags.emotes && msgObj.tags.emotes !== true) {
@@ -89,7 +96,7 @@ class LogView extends Component {
 		})
 
 		for (const replacement of replacements) {
-			const emote = `<img src="${this.buildTwitchEmote(replacement.emoteId)}" alt="${replacement.emoteId}" />`;
+			const emote = `<img src="${this.buildTwitchEmote(replacement.emoteId)}" alt="${message.slice(replacement.start, replacement.end)}" />`;
 			message = message.slice(0, replacement.start) + emote + message.slice(replacement.end);
 		}
 
@@ -97,7 +104,15 @@ class LogView extends Component {
 			for (const emote of [...this.props.bttvChannelEmotes.channelEmotes, ...this.props.bttvChannelEmotes.sharedEmotes]) {
 				const regex = new RegExp(`\\b(${emote.code})\\b`, "g");
 
-				message = message.replace(regex, `<img src="${this.buildBttvEmote(emote.id)}" alt="${emote.id}" />`);
+				message = message.replace(regex, `<img src="${this.buildBttvEmote(emote.id)}" alt="${emote.code}" />`);
+			}
+		}
+
+		if (this.props.ffzChannelEmotes) {
+			for (const emote of Object.values(this.props.ffzChannelEmotes.sets).map(set => set.emoticons).flat()) {
+				const regex = new RegExp(`\\b(${emote.name})\\b`, "g");
+
+				message = message.replace(regex, `<img src="${emote.urls[1]}" alt="${emote.name}" />`);
 			}
 		}
 
@@ -105,7 +120,7 @@ class LogView extends Component {
 			for (const emote of this.props.bttvEmotes) {
 				const regex = new RegExp(`\\b(${emote.code})\\b`, "g");
 
-				message = message.replace(regex, `<img src="${this.buildBttvEmote(emote.id)}" alt="${emote.id}" />`);
+				message = message.replace(regex, `<img src="${this.buildBttvEmote(emote.id)}" alt="${emote.code}" />`);
 			}
 		}
 
@@ -138,6 +153,7 @@ const mapStateToProps = (state) => {
 	return {
 		bttvChannelEmotes: state.bttvChannelEmotes,
 		bttvEmotes: state.bttvEmotes,
+		ffzChannelEmotes: state.ffzChannelEmotes,
 	};
 };
 

web/src/js/store/createInitialState.js

@@ -5,6 +5,7 @@ export default () => {
         apiBaseUrl: process.env.apiBaseUrl,
         channels: [],
         bttvChannelEmotes: null,
+        ffzChannelEmotes: null,
         bttvEmotes: null,
         logs: {},
         loading: false,

web/src/js/store/reducer.js

@@ -12,6 +12,8 @@ export default (state, action) => {
             return { ...state, twitchEmotes: action.twitchEmotes };
         case "SET_BTTV_CHANNEL_EMOTES":
             return { ...state, bttvChannelEmotes: action.bttvChannelEmotes };
+        case "SET_FFZ_CHANNEL_EMOTES":
+            return { ...state, ffzChannelEmotes: action.ffzChannelEmotes };
         case "SET_BTTV_EMOTES":
             return { ...state, bttvEmotes: action.bttvEmotes };
         default: