@jjlmoya/utils-social 1.1.0

package/src/tool/youtubeThumbnail/component.astro

@@ -0,0 +1,419 @@
+---
+import type { KnownLocale } from '../../types';
+import type { YoutubeThumbnailUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as YoutubeThumbnailUI;
+---
+
+<div class="ytx-root" data-error-invalid={t.errorInvalid}>
+  <div class="ytx-input-panel">
+    <div class="ytx-url-container">
+      <svg class="ytx-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 12.3533 19.1869 14.5168 17.8209 16.2307L23.7335 22.1432C24.124 22.5338 24.1241 23.1669 23.7335 23.5574C23.3429 23.948 22.7098 23.948 22.3193 23.5574L16.4068 17.6449C14.693 19.0108 12.5295 19.824 10.1762 19.824L10 20ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"/>
+      </svg>
+      <input
+        type="url"
+        id="ytx-url-input"
+        placeholder={t.urlPlaceholder}
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <button id="ytx-paste-btn" type="button" class="ytx-paste-btn" aria-label={t.pasteAriaLabel}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+          <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2ZM13 18H7V16H13V18ZM17 14H7V12H17V14ZM11 10H7V8H11V10ZM13 9V3.5L18.5 9H13Z"/>
+        </svg>
+      </button>
+    </div>
+    <p class="ytx-helper-text">{t.helperText}</p>
+  </div>
+
+  <div id="ytx-results" class="ytx-results-panel ytx-hidden">
+    <div class="ytx-main-card">
+      <div class="ytx-ribbon">{t.ribbonLabel}</div>
+      <img id="ytx-main-img" src="" alt={t.imgAlt} />
+      <div class="ytx-card-actions">
+        <button id="ytx-download-btn" class="ytx-download-btn">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+            <path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z"/>
+          </svg>
+          {t.downloadBtn}
+        </button>
+      </div>
+    </div>
+
+    <div class="ytx-resolutions-grid">
+      <div class="ytx-res-card">
+        <p class="ytx-res-label">{t.qualityMedium}</p>
+        <img id="ytx-mq-img" src="" alt="Medium Quality" />
+        <a id="ytx-mq-link" href="#" target="_blank" rel="noopener noreferrer">{t.viewImage}</a>
+      </div>
+      <div class="ytx-res-card">
+        <p class="ytx-res-label">{t.qualityStandard}</p>
+        <img id="ytx-sd-img" src="" alt="Standard Quality" />
+        <a id="ytx-sd-link" href="#" target="_blank" rel="noopener noreferrer">{t.viewImage}</a>
+      </div>
+      <div class="ytx-res-card">
+        <p class="ytx-res-label">{t.qualityLow}</p>
+        <img id="ytx-hq-img" src="" alt="Low Quality" />
+        <a id="ytx-hq-link" href="#" target="_blank" rel="noopener noreferrer">{t.viewImage}</a>
+      </div>
+    </div>
+  </div>
+
+  <div id="ytx-error" class="ytx-error-panel ytx-hidden">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="32" height="32">
+      <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z"/>
+    </svg>
+    <span id="ytx-error-msg"></span>
+  </div>
+</div>
+
+<script>
+  import { extractVideoId } from './logic';
+
+  let currentVideoId = '';
+  let errorInvalid = 'Invalid YouTube URL.';
+  let urlInput: HTMLInputElement | null = null;
+  let resultsPanel: HTMLDivElement | null = null;
+  let errorPanel: HTMLDivElement | null = null;
+  let errorMsg: HTMLSpanElement | null = null;
+  let mainImg: HTMLImageElement | null = null;
+
+  function updateThumbnails(videoId: string) {
+    currentVideoId = videoId;
+    resultsPanel?.classList.remove('ytx-hidden');
+    errorPanel?.classList.add('ytx-hidden');
+    const base = `https://img.youtube.com/vi/${videoId}`;
+    const hqUrl = `${base}/hqdefault.jpg`;
+    if (mainImg) {
+      mainImg.src = `${base}/maxresdefault.jpg`;
+      mainImg.onload = () => { if (mainImg!.naturalWidth < 200) mainImg!.src = hqUrl; };
+    }
+    const set = (id: string, attr: 'src' | 'href', val: string) => { const el = document.getElementById(id); if (el) (el as HTMLElement & Record<string, string>)[attr] = val; };
+    set('ytx-mq-img', 'src', `${base}/mqdefault.jpg`);
+    set('ytx-sd-img', 'src', `${base}/sddefault.jpg`);
+    set('ytx-hq-img', 'src', hqUrl);
+    set('ytx-mq-link', 'href', `${base}/mqdefault.jpg`);
+    set('ytx-sd-link', 'href', `${base}/sddefault.jpg`);
+    set('ytx-hq-link', 'href', hqUrl);
+  }
+
+  function handleInput(url: string) {
+    if (!url) { resultsPanel?.classList.add('ytx-hidden'); errorPanel?.classList.add('ytx-hidden'); return; }
+    const videoId = extractVideoId(url);
+    if (videoId) { updateThumbnails(videoId); return; }
+    resultsPanel?.classList.add('ytx-hidden');
+    errorPanel?.classList.remove('ytx-hidden');
+    if (errorMsg) errorMsg.textContent = errorInvalid;
+  }
+
+  async function handlePaste() {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (urlInput) { urlInput.value = text; urlInput.dispatchEvent(new Event('input')); }
+    } catch { void 0; }
+  }
+
+  async function handleDownload() {
+    if (!mainImg?.src || !currentVideoId) return;
+    try {
+      const blob = await (await fetch(mainImg.src)).blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = blobUrl; a.download = `youtube-thumbnail-${currentVideoId}.jpg`;
+      document.body.appendChild(a); a.click();
+      document.body.removeChild(a); URL.revokeObjectURL(blobUrl);
+    } catch { window.open(mainImg.src, '_blank'); }
+  }
+
+  function init() {
+    const root = document.querySelector('.ytx-root') as HTMLElement | null;
+    if (!root) return;
+    errorInvalid = root.dataset.errorInvalid || 'Invalid YouTube URL.';
+    urlInput = document.getElementById('ytx-url-input') as HTMLInputElement | null;
+    resultsPanel = document.getElementById('ytx-results') as HTMLDivElement | null;
+    errorPanel = document.getElementById('ytx-error') as HTMLDivElement | null;
+    errorMsg = document.getElementById('ytx-error-msg') as HTMLSpanElement | null;
+    mainImg = document.getElementById('ytx-main-img') as HTMLImageElement | null;
+    urlInput?.addEventListener('input', (e) => handleInput((e.target as HTMLInputElement).value.trim()));
+    document.getElementById('ytx-paste-btn')?.addEventListener('click', handlePaste);
+    document.getElementById('ytx-download-btn')?.addEventListener('click', handleDownload);
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .ytx-root {
+    --bg: #fff;
+    --bg-muted: #f8fafc;
+    --bg-img: #f1f5f9;
+    --text: #1e293b;
+    --text-label: #334155;
+    --text-muted: #64748b;
+    --text-placeholder: #cbd5e1;
+    --border: #e2e8f0;
+    --paste-bg: #f1f5f9;
+    --paste-hover: #e2e8f0;
+    --paste-color: #64748b;
+    --paste-hover-color: #0f172a;
+    --error-bg: #fef2f2;
+    --error-text: #b91c1c;
+    --shadow: rgba(0, 0, 0, 0.08);
+
+    max-width: 900px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  :global(.theme-dark) .ytx-root {
+    --bg: #0f172a;
+    --bg-muted: #020617;
+    --bg-img: #1e293b;
+    --text: #f1f5f9;
+    --text-label: #cbd5e1;
+    --text-muted: #94a3b8;
+    --text-placeholder: #475569;
+    --border: #1e293b;
+    --paste-bg: #1e293b;
+    --paste-hover: #334155;
+    --paste-color: #94a3b8;
+    --paste-hover-color: #f1f5f9;
+    --error-bg: rgba(239, 68, 68, 0.1);
+    --error-text: #fca5a5;
+    --shadow: rgba(0, 0, 0, 0.3);
+  }
+
+  .ytx-input-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .ytx-url-container {
+    position: relative;
+    width: 100%;
+    max-width: 700px;
+    display: flex;
+    align-items: center;
+    background: var(--bg);
+    border: 2px solid transparent;
+    border-radius: 50px;
+    box-shadow: 0 10px 40px var(--shadow);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .ytx-url-container:focus-within {
+    border-color: #ef4444;
+    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.2);
+    transform: translateY(-2px);
+  }
+
+  .ytx-search-icon {
+    position: absolute;
+    left: 1.5rem;
+    width: 24px;
+    height: 24px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  #ytx-url-input {
+    width: 100%;
+    padding: 1.25rem 3.5rem;
+    padding-right: 4.5rem;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 50px;
+    background: transparent;
+    color: var(--text);
+    outline: none;
+    font-weight: 500;
+  }
+
+  #ytx-url-input::placeholder {
+    color: var(--text-placeholder);
+    font-weight: 400;
+  }
+
+  .ytx-paste-btn {
+    position: absolute;
+    right: 0.5rem;
+    width: 44px;
+    height: 44px;
+    border: none;
+    border-radius: 50%;
+    background: var(--paste-bg);
+    color: var(--paste-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+  }
+
+  .ytx-paste-btn:hover {
+    background: var(--paste-hover);
+    color: var(--paste-hover-color);
+    transform: scale(1.05);
+  }
+
+  .ytx-paste-btn:active { transform: scale(0.95); }
+
+  .ytx-helper-text {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  .ytx-results-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    transition: opacity 0.4s;
+  }
+
+  .ytx-main-card {
+    position: relative;
+    background: var(--bg);
+    border-radius: 20px;
+    padding: 1rem;
+    box-shadow: 0 10px 30px var(--shadow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    overflow: hidden;
+  }
+
+  .ytx-ribbon {
+    position: absolute;
+    top: 2rem;
+    left: -2.5rem;
+    background: #ef4444;
+    color: white;
+    padding: 0.5rem 3rem;
+    font-weight: 800;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    transform: rotate(-45deg);
+    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
+    z-index: 10;
+  }
+
+  #ytx-main-img {
+    width: 100%;
+    border-radius: 12px;
+    box-shadow: 0 5px 15px var(--shadow);
+    display: block;
+    background: var(--bg-muted);
+    min-height: 300px;
+    object-fit: cover;
+  }
+
+  .ytx-card-actions {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .ytx-download-btn {
+    background: #ef4444;
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 50px;
+    border: none;
+    font-size: 1.1rem;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: all 0.2s;
+    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+  }
+
+  .ytx-download-btn:hover {
+    background: #dc2626;
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.4);
+  }
+
+  .ytx-download-btn:active { transform: translateY(1px); }
+
+  .ytx-resolutions-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 650px) {
+    .ytx-resolutions-grid { grid-template-columns: 1fr; }
+  }
+
+  .ytx-res-card {
+    background: var(--bg);
+    border-radius: 16px;
+    padding: 1rem;
+    box-shadow: 0 4px 15px var(--shadow);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: center;
+    text-align: center;
+  }
+
+  .ytx-res-card img {
+    width: 100%;
+    border-radius: 8px;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    background: var(--bg-img);
+  }
+
+  .ytx-res-label {
+    margin: 0;
+    font-weight: 700;
+    color: var(--text-label);
+    font-size: 0.95rem;
+  }
+
+  .ytx-res-card a {
+    color: #3b82f6;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: color 0.2s;
+  }
+
+  .ytx-res-card a:hover {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+
+  .ytx-error-panel {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--error-bg);
+    border-left: 4px solid #ef4444;
+    color: var(--error-text);
+    padding: 1.5rem;
+    border-radius: 12px;
+    font-weight: 500;
+  }
+
+  .ytx-hidden {
+    display: none;
+  }
+</style>

package/src/tool/youtubeThumbnail/i18n/en.ts

@@ -0,0 +1,207 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { YoutubeThumbnailUI } from '../ui';
+
+const slug = 'youtube-thumbnail-extractor';
+const title = 'YouTube Thumbnail Extractor (HD)';
+const description =
+  'Extract and download the original thumbnail image from any YouTube video at maximum resolution and without watermarks using just the URL.';
+
+const faqData = [
+  {
+    question: 'At what resolution are thumbnails extracted?',
+    answer:
+      "The tool always tries to fetch the image at 'MaxRes' resolution (1280x720 or 1920x1080), which is the original quality uploaded by the video creator. If the author did not upload an HD thumbnail, it will automatically show the next highest available resolution.",
+  },
+  {
+    question: 'What types of links are supported?',
+    answer:
+      'It supports traditional youtube.com/watch URLs, short youtu.be links, mobile links, and even YouTube Shorts URLs transparently.',
+  },
+  {
+    question: 'Is it legal to download YouTube thumbnails?',
+    answer:
+      'Yes, downloading is completely legal for personal use, design, parodies and inspiration (Fair Use). Be careful if you plan to use copyright-protected thumbnails for purely commercial purposes — in those cases it is important to check the video licence.',
+  },
+  {
+    question: 'Is there a daily usage limit?',
+    answer:
+      'There are no monthly or daily limits. Because this software operates client-side by resolving the URL pattern internally in your browser, we do not interact with traditional restrictive APIs.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Copy the video URL',
+    text: 'Go to YouTube and copy the video link from the browser address bar or the share button.',
+  },
+  {
+    name: 'Paste the link',
+    text: 'Enter the URL into the extractor field or use the paste-from-clipboard button.',
+  },
+  {
+    name: 'Select the quality',
+    text: 'The tool will display all available resolutions, from maximum quality (1080p) down to the lowest.',
+  },
+  {
+    name: 'Download the image',
+    text: 'Click the download button to save the thumbnail to your device.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'en',
+};
+
+export const content: ToolLocaleContent<YoutubeThumbnailUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'Documentation & References',
+  bibliography: [
+    {
+      name: 'YouTube Help: Add a custom video thumbnail',
+      url: 'https://support.google.com/youtube/answer/72431',
+    },
+    {
+      name: 'YouTube Creator Academy: Make great thumbnails',
+      url: 'https://creatoracademy.youtube.com/',
+    },
+    {
+      name: 'Google Developers: YouTube Data API — Thumbnails',
+      url: 'https://developers.google.com/youtube/v3/docs/thumbnails',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Download YouTube Thumbnails in HD for Free',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'If you need to <strong>download the thumbnail of a YouTube video</strong> at its original size or maximum quality (Full HD or 4K), this free tool is the fastest solution. You can get the cover image from any channel to find inspiration, create your own designs or use it in presentations.',
+    },
+    {
+      type: 'tip',
+      title: 'Extract Cover Images Without Software',
+      html: '<p>No need to install software or register. Just copy and paste the video link and you can <strong>save the YouTube thumbnail</strong> directly to your computer or phone.</p>',
+    },
+    {
+      type: 'title',
+      text: 'How to Get the Thumbnail of a YouTube Video?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The process to <strong>grab the image from a YouTube video</strong> is very straightforward. Follow these steps to get the image in seconds:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>1. Copy the URL:</strong> Go to YouTube and copy the video link (either from the browser address bar or the share button).',
+        '<strong>2. Paste the link:</strong> Enter the URL into the search field of our thumbnail extractor.',
+        '<strong>3. Select the quality:</strong> We will show all available resolutions, from maximum quality (1080p) down to the lowest (360p).',
+        '<strong>4. Download the image:</strong> Click the download button to save the <i>thumbnail</i> to your device.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Supported Formats and Resolutions',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Downloading YouTube video covers has never been easier. The tool automatically fetches the best possible image (known as <strong>maxresdefault</strong>), which are usually designs crafted in Photoshop by YouTubers. If the creator did not upload an HD image, you will get the next best option (<strong>hqdefault</strong> or <strong>mqdefault</strong>).',
+    },
+    {
+      type: 'paragraph',
+      html: 'This utility is perfect for <i>Community Managers</i>, graphic designers, content creators, meme makers, or anyone who needs to <strong>download a video cover image</strong> for their projects. It is also compatible with <strong>YouTube Shorts</strong>, so you can grab their thumbnails in the same way.',
+    },
+    {
+      type: 'title',
+      text: 'Professional Uses for YouTube Thumbnails',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'YouTube thumbnails are high-value visual assets. They represent hours of design work, A/B testing and CTR optimisation by creators. Knowing how to access and download them opens up a wide range of professional possibilities.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        {
+          type: 'card',
+          title: 'Content Creators',
+          html: '<p>Analyse the thumbnails of viral videos in your niche to understand which visual elements drive the most clicks: typography, dominant colours, use of faces or text.</p><ul><li><strong>Visual benchmarking:</strong> Compare your thumbnails against the leaders in your sector.</li><li><strong>Design iteration:</strong> Download thumbnails as reference material in Photoshop or Canva.</li><li><strong>Inspiration archive:</strong> Build a library of high-converting thumbnails.</li></ul>',
+        },
+        {
+          type: 'card',
+          title: 'Designers and Marketers',
+          html: '<p>For a graphic designer or <i>social media manager</i>, quick access to YouTube thumbnails is essential for presentations, client proposals and visual audits.</p><ul><li><strong>Client presentations:</strong> Include real competitor screenshots in your proposals.</li><li><strong>Brand audits:</strong> Evaluate the visual consistency of a YouTube channel.</li><li><strong>Moodboards:</strong> Collect high-quality visual references without blurry screenshots.</li></ul>',
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Compatibility with YouTube Shorts',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The extractor works perfectly with <strong>YouTube Shorts</strong>. Shorts have their own vertical (9:16) thumbnail format that is generated automatically from the video. This tool recognises Shorts URLs (<code>youtube.com/shorts/ID</code>) and extracts the best available thumbnail in exactly the same way as with standard videos.',
+    },
+    {
+      type: 'tip',
+      title: 'Privacy Guaranteed',
+      html: '<p>All extraction happens in your browser. No URLs or data are sent to any external server.</p>',
+    },
+  ],
+  ui: {
+    urlPlaceholder: 'Paste the YouTube link here...',
+    pasteAriaLabel: 'Paste from clipboard',
+    helperText: 'Supported formats: youtube.com, youtu.be, shorts.',
+    ribbonLabel: 'Maximum Quality',
+    downloadBtn: 'Download at Maximum Resolution',
+    qualityMedium: 'Medium Quality',
+    qualityStandard: 'Standard Quality',
+    qualityLow: 'Low Quality',
+    viewImage: 'View Image',
+    errorInvalid: 'Invalid YouTube URL. Please check and try again.',
+    imgAlt: 'YouTube HD Thumbnail',
+  },
+};