added image support for Ticker

src/backend-api/src/main/kotlin/org/icpclive/api/Settings.kt

@@ -113,6 +113,15 @@ data class TextTickerSettings(
     override fun toMessage() = TextTickerMessage(this)
 }
 
+@Serializable
+@SerialName("image")
+data class ImageTickerSettings(
+    override val part: TickerPart, override val periodMs: Long, val path: String
+) : TickerMessageSettings() {
+    override fun toMessage() = ImageTickerMessage(this)
+}
+
+
 @Serializable
 @SerialName("clock")
 data class ClockTickerSettings(override val part: TickerPart, override val periodMs: Long) : TickerMessageSettings() {

src/backend-api/src/main/kotlin/org/icpclive/api/Ticker.kt

@@ -22,6 +22,17 @@ class TextTickerMessage(val settings: TextTickerSettings) :
     }
 }
 
+@Serializable
+@SerialName("image")
+class ImageTickerMessage(val settings: ImageTickerSettings)
+    : TickerMessage(generateId(TICKER_ID_PREFIX), settings.part, settings.periodMs) {
+        companion object {
+            const val TICKER_ID_PREFIX: String = "ticker_image"
+        }
+    }
+
+
+
 @Serializable
 @SerialName("clock")
 class ClockTickerMessage(val settings: ClockTickerSettings) :
@@ -38,4 +49,4 @@ class ScoreboardTickerMessage(val settings: ScoreboardTickerSettings) :
     companion object {
         const val TICKER_ID_PREFIX: String = "ticker_scoreboard"
     }
-}
+}

src/frontend/admin/src/components/TickerMessage.js

@@ -8,6 +8,7 @@ import AddIcon from "@mui/icons-material/Add";
 import ClockIcon from "@mui/icons-material/AccessTime";
 import ScoreboardIcon from "@mui/icons-material/EmojiEvents";
 import TextIcon from "@mui/icons-material/Abc";
+import ImageIcon from "@mui/icons-material/Image";
 import { TickerTableRow } from "./TickerTableRow";
 import Dashboard from "./Dashboard";
 import { usePresetWidgetService } from "../services/presetWidget";
@@ -29,6 +30,11 @@ const addPresetButtons = [
         component: TextIcon,
         settings: { text: "", periodMs: 30000 },
     },
+    {
+        type: "image",
+        component: ImageIcon,
+        settings: { path: "", periodMs: 30000 },
+    },
 ];
 
 const makeAddButtons = (part) => {

src/frontend/admin/src/components/TickerTableRow.js

@@ -8,6 +8,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ClockIcon from "@mui/icons-material/AccessTime";
 import ScoreboardIcon from "@mui/icons-material/EmojiEvents";
 import TextIcon from "@mui/icons-material/Abc";
+import ImageIcon from "@mui/icons-material/Image";
 import ShowPresetButton from "./ShowPresetButton";
 import { activeRowColor } from "../styles";
 import PropTypes from "prop-types";
@@ -37,6 +38,7 @@ export function TickerTableRow({ data, onShow, onEdit, onDelete }) {
                 {data.settings.type === "clock" && <ClockIcon/>}
                 {data.settings.type === "scoreboard" && <ScoreboardIcon/>}
                 {data.settings.type === "text" && <TextIcon/>}
+                {data.settings.type === "image" && <ImageIcon/>}
             </TableCell>
             <TableCell component="th" scope="row">
                 {data.settings.type === "text" &&
@@ -47,6 +49,14 @@ export function TickerTableRow({ data, onShow, onEdit, onDelete }) {
                                 onChange={onChangeFieldEventHandler(setEditData, "text")}/>
                         </Box>)
                     )}
+                {data.settings.type === "image" &&
+                    (editData === undefined ? data.settings.text : (
+                        <Box onSubmit={onSubmitEdit} component="form" type="submit">
+                            <TextField autoFocus hiddenLabel fullWidth defaultValue={data.settings.path}
+                                id="filled-hidden-label-small" type="text" size="small" sx={{ width: 1 }}
+                                onChange={onChangeFieldEventHandler(setEditData, "path")}/>
+                        </Box>)
+                    )}
                 {data.settings.type === "scoreboard" &&
                     (editData === undefined ?
                         "From " + data.settings.from + " to " + data.settings.to :

src/frontend/common/api.ts

@@ -667,12 +667,14 @@ export namespace TickerEvent {
 
 export type TickerMessage =
   | TickerMessage.clock
+  | TickerMessage.image
   | TickerMessage.scoreboard
   | TickerMessage.text;
 
 export namespace TickerMessage {
   export enum Type {
     clock = "clock",
+    image = "image",
     scoreboard = "scoreboard",
     text = "text",
   }
@@ -685,6 +687,14 @@ export namespace TickerMessage {
     settings: clock;
   }
 
+  export interface image {
+    type: TickerMessage.Type.image;
+    id: string;
+    part: TickerPart;
+    periodMs: number;
+    settings: image;
+  }
+
   export interface scoreboard {
     type: TickerMessage.Type.scoreboard;
     id: string;
@@ -712,6 +722,12 @@ export interface clock {
   periodMs: number;
 }
 
+export interface image {
+  part: TickerPart;
+  periodMs: number;
+  path: string;
+}
+
 export interface scoreboard {
   part: TickerPart;
   periodMs: number;

src/frontend/overlay/src/components/organisms/tickers/Image.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+
+export const ImageWrap = styled.div`
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  background: url(${(props) => props.path}) no-repeat;
+  display: flex;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-size: contain;
+  background-position: center;
+`;
+
+
+export const Image = ({tickerSettings, part}) => {
+    return <ImageWrap
+        path={tickerSettings.path}
+    />;
+};
+
+export default Image;
+

src/frontend/overlay/src/components/organisms/widgets/Ticker.jsx

@@ -10,6 +10,7 @@ import live from "../../../assets/icons/live.svg";
 import Clock from "../tickers/Clock";
 import Scoreboard from "../tickers/Scoreboard";
 import Text from "../tickers/Text";
+import Image from "../tickers/Image";
 
 const rowAppear = keyframes`
   from {
@@ -73,7 +74,8 @@ const SingleTickerWrap = styled.div`
 const widgetTypes = Object.freeze({
     text: Text,
     clock: Clock,
-    scoreboard: Scoreboard
+    scoreboard: Scoreboard,
+    image: Image,
 });
 
 const DefaultTicker = ({ tickerSettings }) => {