Resolution for Issues #1044 & #1007

packages/app/app/components/AlbumView/index.tsx

@@ -87,7 +87,7 @@ export const AlbumView: React.FC<AlbumViewProps> = ({
                   album.year &&
                   <div className={styles.album_year}>
                     <label>{t('year')}</label>
-                    {album.year}
+                    {album.year.slice(0, 4)}
                   </div>
                 }
                 <div className={styles.album_tracks}>

packages/app/app/components/LivestreamSeekbar/index.js

@@ -0,0 +1,40 @@
+/* import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './styles.scss';
+
+const Seekbar = ({ seek, queue, fill, children }) => {
+  const handleClick = useCallback(event => {
+    const percent = (event.pageX - event.target.offsetLeft)/document.body.clientWidth;
+    const duration = queue.queueItems[queue.currentSong].streams[0].duration;
+
+    seek(percent * duration);
+  }, [queue.queueItems, queue.currentSong, seek]);
+
+  return (
+    <div onClick={handleClick} className={styles.seekbar_container}>
+      <div style={{width: fill}} className={styles.seekbar_fill} />
+      { children || <div className={styles.seekbar_placeholder}>00:00</div> }
+    </div>
+  );
+};
+
+Seekbar.propTypes = {
+  seek: PropTypes.func,
+  queue: PropTypes.shape({
+    currentSong: PropTypes.number,
+    queueItems: PropTypes.array
+  }),
+  fill: PropTypes.string,
+  children: PropTypes.node
+};
+
+Seekbar.defaultProps = {
+  seek: () => {},
+  queue: {},
+  fill: '0%',
+  children: null
+};
+
+export default Seekbar;
+*/

packages/app/app/components/LivestreamSeekbar/styles.scss

@@ -0,0 +1,26 @@
+/*@import "../../vars";
+
+.livestream_seekbar_container {
+  position: relative;
+  cursor: pointer;
+  background-color: $background2;
+  flex: none !important;
+  padding: 3px 0 !important;
+  height: auto !important;
+  font-size: 12px;
+  line-height: 1em;
+}
+
+.livestream_seekbar_fill {
+  background-color: $pink;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  will-change: auto;
+}
+.livestream_seekbar_placeholder {
+  opacity: 0;
+}
+*/

packages/app/app/reducers/equalizer.js

@@ -52,7 +52,7 @@ const getPresets = (custom) => [
     preAmp: 0
   },
   {
-    label: 'Full trebble',
+    label: 'Full treble',
     id: 'full-treble',
     values: [-6, -6, -6, -6, -2, 2, 6, 8, 8, 9, 9],
     preAmp: 0
@@ -72,8 +72,8 @@ const normalize = list => list.reduce(({ids, map}, item) => ({
 const getSelected = (selected, presets) => {
   if (selected.toLowerCase() === selected) {
     return selected;
-  } 
-  const legacySelected = presets.find(preset => preset.label === selected);  
+  }
+  const legacySelected = presets.find(preset => preset.label === selected);
   return legacySelected ? legacySelected.id : presets[0].id;
 };
 
@@ -86,7 +86,7 @@ const getLegacyCustom = ({presets}) => {
 
 const getSpectrumStatus = (otherConfig) => {
   return _.get(otherConfig, 'enableSpectrum', false);
-}; 
+};
 
 const getInitialState = () => {
   const {custom, selected, ...other} = store.get('equalizer');

packages/ui/lib/components/LivestreamSeekbar/index.tsx

@@ -0,0 +1,110 @@
+/**
+* Just like a regular Seekbar, but with "Live" instead of timestamps
+* and the progress is always 100%
+*/
+/*
+import React, { useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+
+import common from '../../common.scss';
+import styles from './styles.scss';
+import { Popup } from 'semantic-ui-react';
+
+type QueueItem = {
+  streams: { duration: number }[];
+};
+type Segment = {
+  startTime: number;
+  endTime: number;
+  category: string;
+};
+
+export type LivestreamSeekbarProps = {
+  children?: React.ReactNode;
+  fill: number;
+  seek: (arg0: number) => void;
+  queue: {
+    queueItems: QueueItem[];
+    currentSong?: number;
+  };
+  height?: string;
+  skipSegments?: Segment[];
+  allowSkipSegment?: boolean;
+  timePlayed?: number;
+  segmentPopupMessage: string;
+};
+
+const LivestreamSeekbar: React.FC<LivestreamSeekbarProps> = ({
+  children,
+  fill,
+  seek,
+  queue,
+  height,
+  skipSegments=[],
+  allowSkipSegment,
+  timePlayed,
+  segmentPopupMessage
+}) => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    if (!hasMounted) {
+      setHasMounted(true);
+    } else if (allowSkipSegment && skipSegments && skipSegments.length && timePlayed) {
+      for (const segment of skipSegments) {
+        if (timePlayed >= segment.startTime && timePlayed <= segment.endTime) {
+          seek(segment.endTime);
+        }
+      }
+    }
+  }, [hasMounted, seek, skipSegments, timePlayed, allowSkipSegment]);
+  const duration = queue?.queueItems[queue.currentSong]?.streams?.[0]?.duration;
+
+  const handleClick = useCallback((seek) => {
+    return event => {
+      const percent = (event.pageX - event.target.offsetLeft) / document.body.clientWidth;
+      seek(percent * duration);
+    };
+  }, [duration]);
+
+  return (
+    <div
+      className={cx(
+        common.nuclear,
+        styles.seekbar
+      )}
+      onClick={handleClick(seek)}
+      style={{ height }}
+    >
+      <div
+        style={{ width: `${fill}%` }}
+        className={cx(
+          common.nuclear,
+          styles.seekbar_progress
+        )}
+      >
+        {children}
+        {skipSegments.map((segment, index) => <Popup
+          key={index}
+          className={styles.seekbar_popup}
+          trigger={
+            <div
+              className={styles.seekbar_segment}
+              style={{
+                // width: `${(segment.endTime - segment.startTime) / duration * 100}%`,
+                width: '100%',
+                left: `${segment.startTime / duration * 100}%`
+              }}
+            />
+          }
+          content={segmentPopupMessage}
+          position='top center'
+          on='hover'
+        />)
+        }
+      </div>
+    </div>
+  );
+};
+
+export default LivestreamSeekbar;
+*/

packages/ui/lib/components/LivestreamSeekbar/styles.scss

@@ -0,0 +1,43 @@
+/*@import "../../common.scss";
+
+.LivestreamSeekbar {
+  position: relative;
+  height: 1.25em;
+  cursor: pointer;
+  background-color: $background2;
+  flex: 0 0 auto;
+  transition: height 0.25s;
+
+  .LivestreamSeekbar_progress {
+    height: 100%;
+    background-color: $pink;
+  }
+
+  .LivestreamSeekbar_segment {
+    position: absolute;
+    background-color: rgba($blue, 0.75);
+    height: 100%;
+  }
+
+}
+
+.LivestreamSeekbar_popup {
+  background: $bgdarker !important;
+  color: $white !important;
+  border-color: $bgdefault !important;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.18), 0px 0px 20px 0px rgba(0, 0, 0, 0.09) !important;
+  user-select: none;
+
+  &:before {
+    background-color: $bgdarker !important;
+  }
+
+  &.bottom:before {
+    box-shadow: -1px -1px 0 0 $bgdefault !important;
+  }
+
+  &.top:before {
+    box-shadow: 1px 1px 0 0 $bgdefault !important;
+  }
+}
+*/