Merge branch '8.0' of https://github.com/mue/mue into 8.0

package.json

@@ -26,7 +26,6 @@
     "embla-carousel-react": "8.1.3",
     "fast-blurhash": "^1.1.4",
     "framer-motion": "^11.11.0",
-    "image-conversion": "^2.1.1",
     "markdown-to-jsx": "^7.5.0",
     "mue": "file:",
     "react": "^18.3.1",

src/components/Form/Settings/FileUpload/FileUpload.jsx

@@ -1,6 +1,5 @@
 import variables from 'config/variables';
 import { toast } from 'react-toastify';
-import { compressAccurately, filetoDataURL } from 'image-conversion';
 import videoCheck from 'features/background/api/videoCheck';
 
 function FileUpload({ id, type, accept, loadFunction }) {
@@ -30,20 +29,13 @@ function FileUpload({ id, type, accept, loadFunction }) {
         return loadFunction(file);
       }
 
-      compressAccurately(file, {
+      loadFunction(
-        size: 450,
+        {
-        accuracy: 0.9,
-      }).then(async (res) => {
-        if (settingsSize + res.size > 4850000) {
-          return toast(variables.getMessage('toasts.no_storage'));
-        }
-
-        loadFunction({
           target: {
-            result: await filetoDataURL(res),
+            result: file,
           },
-        });
+        },
-      });
+      );
     }
   };
 

src/components/Form/Settings/Radio/Radio.jsx

@@ -59,7 +59,7 @@ function Radio(props) {
             key={option.name}
             label={option.name}
             value={option.value}
-            className="data-[checked]:bg-white/10 group relative flex cursor-pointer rounded-lg bg-white/5 data-[checked]:hover:bg-neutral-700 hover:bg-neutral-700 py-4 px-5 dark:text-white text-black shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white"
+            className="data-[checked]:bg-white/10 group relative flex cursor-pointer rounded-lg bg-white/5 dark:data-[checked]:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:data-[checked]:hover:bg-neutral-700 hover:bg-neutral-200 py-4 px-5 dark:text-white text-black shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white"
           >
             <div className="flex w-full items-center justify-between">
               <div className="text-sm/6">

src/features/background/api/videoCheck.js

@@ -3,7 +3,7 @@
  * @param url - The URL of the file to be checked.
  * @returns A function that takes a url and returns a boolean.
  */
-export default function videoCheck(url) {
+export default function videoCheck(url = '') {
   return (
     url.startsWith('data:video/') ||
     url.endsWith('.mp4') ||

src/features/background/options/Custom.jsx

@@ -10,7 +10,6 @@ import {
   MdFolder,
 } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
-import { compressAccurately, filetoDataURL } from 'image-conversion';
 import videoCheck from '../api/videoCheck';
 
 import { Checkbox, FileUpload } from 'components/Form/Settings';
@@ -162,23 +161,14 @@ export default class CustomSettings extends PureComponent {
         return this.customBackground(file, this.state.currentBackgroundIndex);
       }
 
-      compressAccurately(file, {
+      this.customBackground(
-        size: 450,
+        {
-        accuracy: 0.9,
+          target: {
-      }).then(async (res) => {
+            result: file,
-        if (settingsSize + res.size > 4850000) {
-          return toast(variables.getMessage('toasts.no_storage'));
-        }
-
-        this.customBackground(
-          {
-            target: {
-              result: await filetoDataURL(res),
-            },
           },
-          this.state.currentBackgroundIndex,
+        },
-        );
+        this.state.currentBackgroundIndex,
-      });
+      );
       e.preventDefault();
     };
   }

src/features/welcome/components/Sections/Final.jsx

@@ -4,6 +4,8 @@ import defaults from 'config/default';
 
 function Final(props) {
   const language = localStorage.getItem('language') || defaults.language;
+  const theme = localStorage.getItem('theme') || defaults.theme;
+
   return (
     <Content>
       <Header
@@ -25,7 +27,7 @@ function Final(props) {
           <span>
             {variables.getMessage('settings:sections.appearance.theme.title')}:{' '}
             {variables.getMessage(
-              'settings:sections.appearance.theme.' + localStorage.getItem('theme'),
+              'settings:sections.appearance.theme.' + theme,
             )}
           </span>
         </div>

src/i18n/en-US/_settings.yml

@@ -1,69 +1,381 @@
-reminder: {}
+reminder:
+  message: In order for all of the changes to take place, the page must be refreshed.
+  title: NOTICE
 sections:
-  header: {}
+  header:
+    more_info: More info
+    report_issue: Report Issue
+    enabled: Choose whether or not to show this widget
+    size: Slider to control how large the widget is
   time:
-    digital: {}
+    digital:
+      title: Digital
+      seconds: Seconds
+      twentyfourhour: 24 Hour
+      twelvehour: 12 hour
+      zero: Zero-padded
+      subtitle: Change how the digital clock looks
     analogue:
       title: Analog
+      subtitle: Change how the analogue clock looks
+      second_hand: Seconds hand
+      minute_hand: Minutes hand
+      hour_hand: Hours hand
+      hour_marks: Hour marks
+      minute_marks: Minute marks
+      round_clock: Rounded background
     vertical_clock:
       change_hour_colour: Change hour text color
       change_minute_colour: Change minute text color
+      title: Vertical Clock
+      change_second_colour: Change second text colour
+    title: Time
+    format: Format
+    type: Type
+    type_subtitle: Choose whether to display the time in digital format, analogue
+      format, or a percentage completion of the day
+    percentage_complete: Percentage complete
   date:
-    type: {}
+    type:
-    short_separator: {}
+      short: Short
+      long: Long
+      subtitle: Whether to display the date in long form or short form
+    short_separator:
+      slashes: Slashes
+      title: Short separator
+      dots: Dots
+      dash: Dash
+      gaps: Gaps
+    short_date: Short date
+    long_format: Long format
+    title: Date
+    week_number: Week number
+    day_of_week: Day of week
+    datenth: Date nth
+    type_settings: Display settings and format for the selected date type
+    short_format: Short format
   quote:
     buttons:
       favourite: Favorite
-  greeting: {}
+      title: Buttons
+      subtitle: Choose which buttons to show on the quote
+      copy: Copy
+      tweet: Tweet
+    add: Add quote
+    title: Quote
+    additional: Other settings to customise the style of the quote widget
+    author_link: Author link
+    custom: Custom quote
+    custom_subtitle: Set your own custom quotes
+    no_quotes: No quotes
+    author: Author
+    custom_buttons: Buttons
+    custom_author: Custom author
+    author_img: Show author image
+    source_subtitle: Choose where to get quotes from
+  greeting:
+    events_description: Control events on Mue such as birthdays.
+    title: Greeting
+    events: Events
+    enable_events: Show messages on special days
+    default: Default greeting message
+    name: Name for greeting
+    birthday: Birthday
+    birthday_subtitle: Show a Happy Birthday message when it is your birthday
+    birthday_age: Birthday age
+    birthday_date: Birthday date
+    additional: Settings for the greeting display
+    custom: Custom events
+    event_name: Event Name
+    day: Day
+    month: Month
+    no_events: No Events
+    no_events_description: Add Some Events
+    add_event: Add Event
   background:
     buttons:
       view: Maximize
+      title: Buttons
+      favourite: Favourite
+      download: Download
     effects:
-      filters: {}
+      filters:
+        title: Background filter
+        amount: Filter amount
+        grayscale: Grayscale
+        sepia: Sepia
+        contrast: Contrast
+        invert: Invert
+        saturate: Saturate
+      title: Effects
+      brightness: Adjust brightness
+      subtitle: Add effects to the background images
+      blur: Adjust blur
     type:
       custom_colour: Custom color/gradient
-    unsplash: {}
+      title: Type
+      api: API
+      custom_image: Custom image
+      random_colour: Random colour
+      random_gradient: Random gradient
+    unsplash:
+      title: Unsplash Collection(s)
+      subtitle: Select the collection(s) you want to use for your background
+      id: Collection ID(s)
+      id_subtitle: Enter a comma separated list of Unsplash IDs
     source:
       custom_colour: Custom background color
       add_colour: Add color
-      quality: {}
+      quality:
+        title: Quality
+        high: High Quality
+        normal: Normal Quality
+        datasaver: Data Saver
+        original: Original
+      title: Source
+      add_background: Add background
+      drop_to_upload: Drop to upload
+      formats: 'Available formats: {list}'
+      select: Or Select
+      add_url: Add URL
+      disabled: Disabled
+      loop_video: Loop video
+      mute_video: Mute video
+      custom_title: Custom Images
+      custom_description: Select images from your local computer
+      remove: Remove Image
+      api: Background API
+      subtitle: Select where to get background images from
+      custom_background: Custom background
+      upload: Upload
+    category: Category
+    display: Display
+    display_subtitle: Change how background and photo information are loaded
+    api: API Settings
+    api_subtitle: Options for getting an image from an external service (API)
+    show_map: Show location map on photo information if available
+    title: Background
+    transition: Fade-in transition
+    photo_information: Show photo information
+    categories: Categories
   search:
     voice_search: Voice Search
+    title: Search
+    additional: Additional options for search widget display and functionality
+    search_engine: Search Engine
+    search_engine_subtitle: Choose search engine to use in the search bar
+    custom: Custom Search URL
+    autocomplete: Autocomplete
+    autocomplete_provider: Autocomplete Provider
+    autocomplete_provider_subtitle: Search engine to use for autocomplete dropdown
+      results
+    dropdown: Search Dropdown
+    focus: Focus on tab open
   weather:
-    temp_format: {}
+    temp_format:
-    extra_info: {}
+      title: Temperature format
-    options: {}
+      celsius: Celsius
+      fahrenheit: Fahrenheit
+      kelvin: Kelvin
+    extra_info:
+      title: Extra information
+      show_location: Show location
+      show_description: Show description
+      weather_description: Weather description
+      cloudiness: Cloudiness
+      humidity: Humidity
+      visibility: Visibility
+      wind_speed: Wind speed
+      wind_direction: Wind direction
+      min_temp: Minimum temperature
+      max_temp: Maximum temperature
+      atmospheric_pressure: Atmospheric pressure
+    options:
+      basic: Basic
+      standard: Standard
+      expanded: Expanded
+      custom: Custom
+    title: Weather
+    location: Location
+    auto: Auto
+    widget_type: Widget Type
+    custom_settings: Custom Settings
   quicklinks:
-    options: {}
+    options:
-  message: {}
+      icon: Icon
+      text_only: Text Only
+      metro: Metro
+    title: Quick Links
+    additional: Additional settings for quick links display and functions
+    open_new: Open in new tab
+    tooltip: Tooltip
+    text_only: Show text only
+    add_link: Add Link
+    no_quicklinks: No quick links
+    edit: Edit
+    style: Style
+    styling: Styling
+    styling_description: Customise Quick Links appearance
+  message:
+    title: Message
+    add: Add message
+    messages: Messages
+    text: Text
+    no_messages: No messages
+    add_some: Go ahead and add some.
+    content: Message Content
   appearance:
-    style: {}
+    style:
-    theme: {}
+      title: Widget Style
+      description: Choose between the two styles, legacy (enabled for pre 7.0 users)
+        and our slick modern styling.
+      legacy: Legacy
+      new: New
+    theme:
+      title: Theme
+      description: Change the theme of the Mue widgets and modals
+      auto: Auto
+      light: Light
+      dark: Dark
     navbar:
-      refresh_options: {}
+      refresh_options:
+        none: None
+        page: Page
+      title: Navbar
+      widgets: Navbar Widgets
+      notes: Notes
+      refresh: Refresh
+      refresh_subtitle: Choose what is refreshed when you click the refresh button
+      hover: Only display on hover
+      additional: Modify navbar style and which buttons you want to display
+      apps_subtitle: Create a shortcut of your other commonly used websites.
     font:
-      weight: {}
+      weight:
-      style: {}
+        title: Font weight
+        thin: Thin
+        extra_light: Extra Light
+        light: Light
+        normal: Normal
+        medium: Medium
+        semi_bold: Semi-Bold
+        bold: Bold
+        extra_bold: Extra-Bold
+      style:
+        title: Font style
+        normal: Normal
+        italic: Italic
+        oblique: Oblique
+      title: Font
+      description: Change the font used in Mue
+      custom: Custom font
+      google: Import from Google Fonts
     accessibility:
-      text_shadow: {}
+      text_shadow:
+        title: Widget text shadow
+        new: New
+        old: Old
+        none: None
       widget_zoom: Widget zoom
-  order: {}
+      description: Make Mue comfortable and accessible
+      toast_duration: Toast Duration
+      milliseconds: milliseconds
+      title: Accessibility
+      animations: Animations
+    title: Appearance
+  order:
+    title: Widget Order
   advanced:
-    data_subtitle: Choose whether to export your Mue settings to your computer,
+    data_subtitle: Choose whether to export your Mue settings to your computer, import
-      import an existing settings file, or reset your settings to their default
+      an existing settings file, or reset your settings to their default values
-      values
+    reset_modal:
-    reset_modal: {}
+      title: WARNING
+      question: Do you want to reset Mue?
+      information: This will delete all data. If you wish to keep your data and preferences,
+        please export them first.
+      cancel: Cancel
     customisation: Customization
-    timezone: {}
+    timezone:
-    preview_data_disabled: {}
+      title: Time Zone
+      subtitle: Choose a timezone from the list instead of the automatic default from
+        your computer
+      automatic: Automatic
+    preview_data_disabled:
+      title: Data Settings Disabled
+      description: Data settings are disabled in preview mode. Please exit preview
+        mode to use this feature.
+    title: Advanced
+    offline_mode: Offline mode
+    offline_subtitle: When enabled, all requests to online services will be disabled.
+    data: Data
+    custom_css: Custom CSS
+    custom_js: Custom JS
+    tab_name: Tab name
+    tab_name_subtitle: Change the name of the tab that appears in your browser
+    data_description: Choose whether to export your Mue settings to your computer,
+      import an existing settings file, or reset your settings to their default values
+    custom_css_subtitle: Make Mue's styling customised to you with Cascading Style
+      Sheets (CSS).
+    experimental_warning: Please note that the Mue team cannot provide support if
+      you have experimental mode on. Please disable it first and see if the issue
+      continues to occur before contacting support.
   stats:
-    sections: {}
+    sections:
-    clear_modal: {}
+      tabs_opened: Tabs opened
-  experimental: {}
+      backgrounds_favourited: Backgrounds favourited
-  language: {}
+      backgrounds_downloaded: Backgrounds downloaded
-  changelog: {}
+      quotes_favourited: Quotes favourited
+      quicklinks_added: Quicklinks added
+      settings_changed: Settings changed
+      addons_installed: Add-ons installed
+    clear_modal:
+      question: Do you want to clear your stats?
+      information: This will clear all achievements and usage statistics.
+    title: Stats
+    usage: Usage Stats
+    achievements: Achievements
+    achievement_unlocked: 'Achievement Unlocked: {name}'
+    unlocked: '{count} Unlocked'
+    locked: Locked
+  experimental:
+    developer: Developer
+    title: Experimental
+    warning: These settings have not been fully tested/implemented and may not work
+      correctly!
+  language:
+    quote: Quote language
+    title: Language
+  changelog:
+    title: Change Log
+    by: By {author}
   about:
     version:
-      error: {}
+      error:
-    resources_used: {}
+        title: Failed to get update information
-buttons: {}
+        description: An error occured
+      title: Version
+      checking_update: Checking for update
+      update_available: Update available
+      no_update: No update available
+      offline_mode: Cannot check for update in offline mode
+    resources_used:
+      title: Resources used
+      bg_images: Offline background images
+    title: About
+    contact_us: Contact Us
+    support_mue: Support Mue
+    support_subtitle: As Mue is entirely free, we rely on donations to cover the server
+      bills and fund development
+    support_donate: Donate
+    contributors: Contributors
+    supporters: Supporters
+    no_supporters: There are currently no Mue supporters
+    photographers: Photographers
+    curators: Add-on creators
+    form_button: Form
+buttons:
+  reset: Reset
+  import: Import
+  export: Export
+enabled: Enabled
+open_knowledgebase: Open Knowledgebase
+additional_settings: Additional Settings

src/i18n/en-US/_welcome.yml

@@ -1,12 +1,64 @@
 sections:
   intro:
-    notices: {}
+    notices:
-  language: {}
+      discord_title: Join our Discord
-  theme: {}
+      discord_join: Join
-  style: {}
+      github_description: Report bugs, add features or donate
-  settings: {}
+      github_open: Open
+      discord_description: Talk with the Mue community and developers
+      github_title: Contribute on GitHub
+    description: Thank you for installing Mue, we hope you enjoy your time with our
+      extension.
+    title: Welcome to Mue Tab
+  language:
+    title: Choose your language
+    description: Mue can be displayed the languages listed below. You can also add
+      new translations on our
+  theme:
+    title: Select a theme
+    description: Mue is available in both light and dark theme, or this can be automatically
+      set depending on your system theme.
+    tip: Using the Auto settings will use the theme on your computer. This setting
+      will impact the modals and some of the widgets displayed on the screen, such
+      as weather and notes.
+  style:
+    title: Choose a style
+    description: Mue currently offers the choice between the legacy styling and the
+      newly released modern styling.
+    legacy: Legacy
+    modern: Modern
+  settings:
+    title: Import Settings
+    description: Installing Mue on a new device? Feel free to import your old settings!
+    tip: You can export your old settings by navigating to the Advanced tab in your
+      old Mue setup. Then you need to click the export button which will download
+      the JSON file. You can upload this file here to carry across your settings and
+      preferences from your previous Mue installation.
   privacy:
-    links: {}
+    links:
-  final: {}
+      title: Links
-buttons: {}
+      privacy_policy: Privacy Policy
-preview: {}
+      source_code: Source Code
+    description: Enable settings to further protect your privacy with Mue.
+    offline_mode_description: Enabling offline mode will disable all requests to any
+      service. This will result in online backgrounds, online quotes, marketplace,
+      weather, quick links, change log and some about tab information to be disabled.
+    title: Privacy Options
+  final:
+    title: Final step
+    description: Your Mue Tab experience is about to begin.
+    changes: Changes
+    changes_description: To change settings later click on the settings icon in the
+      top right corner of your tab.
+    imported: Imported {amount} settings
+buttons:
+  next: Next
+  preview: Preview
+  previous: Previous
+  close: Close
+  finish: Finish
+preview:
+  continue: Continue setup
+  description: You are currently in preview mode. Settings will be reset on closing
+    this tab.
+tip: Quick Tip

src/i18n/en-US/main.yml

@@ -6,27 +6,98 @@ widgets:
     christmas: Merry Christmas
     newyear: Happy New Year
     halloween: Happy Halloween
-  background: {}
+    birthday: Happy Birthday
-  quicklinks: {}
+  background:
-  date: {}
+    unsplash: on Unsplash
+    information: Information
+    views: Views
+    likes: Likes
+    location: Location
+    camera: Camera
+    resolution: Resolution
+    source: Source
+    category: Category
+    exclude: Don't show again
+    exclude_confirm: "Are you sure you don't want to see this image again?\nNote:
+      if you don't like \"{category}\" images, you can deselect the category in the
+      background source settings."
+    confirm: Confirm
+    download: Download
+    credit: Photo by
+    downloads: Downloads
+  quicklinks:
+    new: New Link
+    edit: Edit Link
+    url: URL
+    icon: Icon (optional)
+    add: Add
+    url_error: Must provide URL
+    name: Name
+    name_error: Must provide name
+  date:
+    week: Week
   weather:
     meters: "{amount} meters"
+    not_found: Not Found
+    extra_information: Extra Information
+    feels_like: Feels like {amount}
   quote:
     favourite: Favorite
     unfavourite: Unfavorite
+    link_tooltip: Open on Wikipedia
+    share: Share
+    copy: Copy
   navbar:
-    tooltips: {}
+    tooltips:
-    notes: {}
+      refresh: Refresh
-    todo: {}
+    notes:
-    apps: {}
+      title: Notes
+      placeholder: Type here
+    todo:
+      title: Todo
+      pin: Pin
+      add: Add
+      no_todos: No Todos
+    apps:
+      no_apps: No app links found
+      title: Apps
+  search: Search
 modals:
   main:
     navbar:
       addons: My Add-ons
-    error_boundary: {}
+      settings: Settings
+      marketplace: Discover
+    error_boundary:
+      title: Error
+      report_error: Send Error Report
+      sent: Sent!
+      message: Failed to load this component of Mue
+      refresh: Refresh
+    title: Options
+    file_upload_error: File is over 2MB
+    loading: Loading...
   update:
-    offline: {}
+    offline:
-    error: {}
+      description: Cannot get update logs while in offline mode
-  share: {}
+      title: Offline
-toasts: {}
+    error:
+      title: Error
+      description: Could not connect to the server
+    title: Update
+  share:
+    email: Email
+    copy_link: Copy link
+toasts:
+  quote: Quote copied
+  notes: Notes copied
+  reset: Reset successfully
+  installed: Successfully installed
+  uninstalled: Successfully removed
+  updated: Successfully updated
+  error: Something went wrong
+  imported: Successfully imported
+  no_storage: Not enough storage
+  link_copied: Link copied
+  stats_reset: Stats reset
 tabname: New Tab

src/i18n/es-419/main.yml

@@ -25,6 +25,7 @@ widgets:
     source: Fuente
     exclude: No volver a mostrar
     confirm: Confirmación
+    resolution: Resolución
   search: Buscar
   quicklinks:
     new: Nuevo enlace
@@ -41,6 +42,7 @@ widgets:
     not_found: No encontrado
     meters: "{amount} metros"
     extra_information: Información adicional
+    feels_like: Sensación {amount}
   quote: {}
   navbar:
     tooltips:

src/index.jsx

@@ -18,9 +18,13 @@ let locale_id = localStorage.getItem('language');
 
 if (locale_id?.indexOf('_')) {
   localStorage.setItem('language', locale_id.replace('_', '-'));
+  locale_id = locale_id.replace('_', '-');
 }
+
 locale_id ||= defaults.language;
+
 const t = await createTranslator(locale_id);
+
 variables.locale_id = locale_id;
 document.documentElement.lang = locale_id;
 
@@ -33,8 +37,8 @@ Sentry.init({
   autoSessionTracking: false,
 });
 
-const container = document.getElementById('root');
+const root = createRoot(document.getElementById('root'));
-const root = createRoot(container);
+
 root.render(
   <ErrorBoundary>
     <App />