add about box (#286)

Author: hyperblast

docs/change-log.md

@@ -3,6 +3,7 @@
 - Fix 1px border in compact mode
 - Do not fail when configured music directory does not exist
 - Replace invalid UTF-8 chars in JSON responses instead of failing
+- Add about box in web UI
 ### DeaDBeeF
 - Raise minimal API version to v1.10 (corresponds to DeaDBeeF v1.8.0)
 - Add support for artwork plugin v2 (used since DeaDBeeF v1.9)

js/webui/src/about_box.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import ServiceContext from './service_context.js';
+import ModelBinding from './model_binding.js';
+
+class AboutBox_ extends React.PureComponent
+{
+    static contextType = ServiceContext;
+
+    constructor(props, context)
+    {
+        super(props, context);
+
+        this.state = this.getStateFromModel();
+    }
+
+    getStateFromModel()
+    {
+        const { title, version, pluginVersion } = this.context.playerModel.info;
+        return { title, version, pluginVersion };
+    }
+
+    render()
+    {
+        const { title, version, pluginVersion } = this.state;
+
+        return (
+            <div className='about-box'>
+                <p>
+                    Beefweb v{pluginVersion} @ {title} v{version}
+                </p>
+                <p>
+                    <a href='https://hyperblast.org/donate/' className='about-box-link' target='_blank'>Donate to author</a>
+                    <a href='third-party-licenses.txt' className='about-box-link' target='_blank'>Third-party licenses</a>
+                    <a href='https://hyperblast.org/beefweb/api/' className='about-box-link' target='_blank'>API documentation</a>
+                </p>
+                <p className='license-text'>
+                    Copyright 2015-2024 Hyperblast<br/><br/>
+
+                    Permission is hereby granted, free of charge, to any person obtaining a copy
+                    of this software and associated documentation files (the "Software"), to deal
+                    in the Software without restriction, including without limitation the rights
+                    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                    copies of the Software, and to permit persons to whom the Software is
+                    furnished to do so, subject to the following conditions:<br/><br/>
+
+                    The above copyright notice and this permission notice shall be included in
+                    all copies or substantial portions of the Software.<br/><br/>
+
+                    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+                    THE SOFTWARE.
+                </p>
+            </div>
+        );
+    }
+}
+
+export default ModelBinding(AboutBox_, { playerModel: 'change'});

js/webui/src/navigation_model.js

@@ -10,7 +10,8 @@ export const View = Object.freeze({
 
 export const SettingsView = Object.freeze({
     general: 'general',
-    columns: 'columns'
+    columns: 'columns',
+    about: 'about',
 });
 
 export const SettingsViewMetadata = [
@@ -22,6 +23,10 @@ export const SettingsViewMetadata = [
         key: SettingsView.columns,
         title: 'Columns',
     },
+    {
+        key: SettingsView.about,
+        title: 'About'
+    }
 ];
 
 export default class NavigationModel extends EventEmitter

js/webui/src/settings_content.js

@@ -4,6 +4,7 @@ import ModelBinding from './model_binding.js';
 import GeneralSettings from './general_settings.js';
 import ColumnsSettings from './columns_settings.js';
 import ServiceContext from './service_context.js';
+import AboutBox from './about_box.js';
 
 class SettingsContent extends React.PureComponent
 {
@@ -17,6 +18,7 @@ class SettingsContent extends React.PureComponent
         this.renderView = {
             [SettingsView.general]: this.renderGeneral,
             [SettingsView.columns]: this.renderColumns,
+            [SettingsView.about]: this.renderAbout,
         };
     }
 
@@ -36,6 +38,11 @@ class SettingsContent extends React.PureComponent
         return <ColumnsSettings columnsSettingsModel={this.context.columnsSettingsModel} />;
     }
 
+    renderAbout()
+    {
+        return <AboutBox />;
+    }
+
     render()
     {
         const { settingsView } = this.state;

js/webui/src/style.less

@@ -100,6 +100,7 @@ body {
     --color-shadow: rgba(189, 189, 189, 0.7);
     --color-play-button: #006600;
     --color-stop-button: #b30000;
+    --color-link: #0000F0;
 }
 
 .st-uitheme-dark {
@@ -111,6 +112,7 @@ body {
     --color-shadow: rgba(0, 0, 0, 0.7);
     --color-play-button: #00aa00;
     --color-stop-button: #e30000;
+    --color-link: #ebf0ea;
 }
 
 /* Elements */
@@ -734,6 +736,33 @@ body {
     .input-element();
 }
 
+.about-box {
+    max-width: 40rem;
+}
+
+.about-box-link {
+    margin-right: 1rem;
+    text-decoration: underline;
+    text-wrap: nowrap;
+    display: inline-block;
+    padding: 0.5rem 0;
+
+    color: var(--color-link);
+
+    &:hover {
+        color: var(--color-link);
+    }
+
+    &:visited {
+        color: var(--color-link);
+    }
+}
+
+.license-text {
+    font-family: monospace;
+    font-size: 110%;
+}
+
 .st-mediasize-medium-up {
     .settings-form {
         display: grid;