home_old.html

<!-- Fragment: StudioDashboardHome - Streaming Services mit Logos -->
<div data-role="page" class="type-interior pluginConfigurationPage" id="studioDashboardHome">
  <div data-role="content">

    <style>
      .streaming-services-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin: 20px 0;
      }
      
      .streaming-service-card {
        position: relative;
        height: 120px;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .streaming-service-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      }
      
      .service-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 10px;
        width: 100%;
      }
      
      .service-logo {
        max-width: 80px;
        max-height: 40px;
        margin-bottom: 8px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
      }
      
      .service-name {
        font-weight: bold;
        font-size: 14px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.7);
        margin-bottom: 4px;
      }
      
      .service-count {
        font-size: 12px;
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0,0,0,0.7);
      }
      
      .service-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
        z-index: 1;
      }
      
      /* Spezifische Service-Stile */
      .netflix-card { background: linear-gradient(135deg, #e50914, #b20710); }
      .apple-card { background: linear-gradient(135deg, #1d1d1f, #000000); }
      .amazon-card { background: linear-gradient(135deg, #00a8e1, #0073a8); }
      .disney-card { background: linear-gradient(135deg, #113cce, #0a2a9a); }
      .hbo-card { background: linear-gradient(135deg, #9a44c7, #7a2d9e); }
      .paramount-card { background: linear-gradient(135deg, #0064ff, #004bb5); }
      .sony-card { background: linear-gradient(135deg, #000000, #333333); }
      .peacock-card { background: linear-gradient(135deg, #00b3a6, #008077); }
      .hulu-card { background: linear-gradient(135deg, #3db848, #2d9138); }
      .showtime-card { background: linear-gradient(135deg, #d50056, #a10043); }
      .starz-card { background: linear-gradient(135deg, #000000, #1a1a1a); }
      .warner-card { background: linear-gradient(135deg, #0040a5, #003182); }
      .universal-card { background: linear-gradient(135deg, #333333, #1a1a1a); }
      .default-card { background: linear-gradient(135deg, #555555, #333333); }
      
      .search-container {
        margin-bottom: 20px;
      }
      
      .filter-container {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }
      
      .no-services {
        text-align: center;
        padding: 40px;
        color: #888;
        font-size: 16px;
      }
    </style>

    <h2>🎬 Streaming Studios</h2>

    <div class="search-container">
      <input is="emby-input" id="homeSearch" type="text" label="Studio suchen..." />
    </div>

    <div class="filter-container">
      <select is="emby-select" id="homeTop" label="Anzeigen">
        <option value="0" selected>Alle</option>
        <option value="10">Top 10</option>
        <option value="20">Top 20</option>
        <option value="50">Top 50</option>
      </select>
      
      <select is="emby-select" id="homeFilter" label="Filter">
        <option value="all" selected>Alle Studios</option>
        <option value="streaming">Nur Streaming-Dienste</option>
        <option value="traditional">Traditionelle Studios</option>
      </select>
    </div>

    <div id="streamingServices" class="streaming-services-container"></div>

  </div>
</div>

<script>
(function () {
  const page = document.getElementById('studioDashboardHome');
  const container = page.querySelector('#streamingServices');
  const topEl = page.querySelector('#homeTop');
  const qEl = page.querySelector('#homeSearch');
  const filterEl = page.querySelector('#homeFilter');

  // Logo URLs für die wichtigsten Streaming-Dienste
  const logoUrls = {
    'Netflix': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IiNlNTA5MTQiLz48dGV4dCB4PSI1MCIgeT0iMjUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5FVEZMSVg8L3RleHQ+PC9zdmc+',
    'Apple': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwMDAwMCIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QXBwbGUgVFYrPC90ZXh0Pjwvc3ZnPg==',
    'Amazon': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwYThlMSIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UHJpbWUgVmlkZW88L3RleHQ+PC9zdmc+',
    'Disney': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjExM2NjZSIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RElTTkVZKzwvdGV4dD48L3N2Zz4=',
    'HBO': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjlhNDRjNyIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SEJPIE1BWDwvdGV4dD48L3N2Zz4=',
    'Sony': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwMDAwMCIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U09OWSBQSUNUVVJFU1wvdGV4dD48L3N2Zz4=',
    'Paramount': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwNjRmZiIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UEFSQU1PVU5UKzwvdGV4dD48L3N2Zz4=',
    'Peacock': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwYjNhNiIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UEVBQ09DSzwvdGV4dD48L3N2Zz4=',
    'Hulu': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjNkYjg0OCIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SFVMVTwvdGV4dD48L3N2Zz4=',
    'Showtime': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9ImQ1MDA1NiIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEzIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U0hPV1RJTUVcL3RleHQ+PC9zdmc+',
    'Starz': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwMDAwMCIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U1RBUlo8L3RleHQ+PC9zdmc+',
    'Warner Bros': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjAwNDBhNSIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+V0FSTkVSIEJST1MuPC90ZXh0Pjwvc3ZnPg==',
    'Universal': 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iNDAiIGZpbGw9IjMzMzMzMyIvPjx0ZXh0IHg9IjUwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI2ZmZmZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+VU5JVkVSU0FMPC90ZXh0Pjwvc3ZnPg=='
  };

  const streamingServices = new Set(['Netflix', 'Apple', 'Amazon', 'Disney', 'HBO', 'Sony', 'Paramount', 'Peacock', 'Hulu', 'Showtime', 'Starz']);

  function getServiceClass(studio) {
    const lowerStudio = studio.toLowerCase();
    if (lowerStudio.includes('netflix')) return 'netflix-card';
    if (lowerStudio.includes('apple')) return 'apple-card';
    if (lowerStudio.includes('amazon') || lowerStudio.includes('prime')) return 'amazon-card';
    if (lowerStudio.includes('disney')) return 'disney-card';
    if (lowerStudio.includes('hbo')) return 'hbo-card';
    if (lowerStudio.includes('paramount')) return 'paramount-card';
    if (lowerStudio.includes('sony')) return 'sony-card';
    if (lowerStudio.includes('peacock')) return 'peacock-card';
    if (lowerStudio.includes('hulu')) return 'hulu-card';
    if (lowerStudio.includes('showtime')) return 'showtime-card';
    if (lowerStudio.includes('starz')) return 'starz-card';
    if (lowerStudio.includes('warner')) return 'warner-card';
    if (lowerStudio.includes('universal')) return 'universal-card';
    return 'default-card';
  }

  function isStreamingService(studio) {
    return streamingServices.has(studio) || 
           studio.toLowerCase().includes('netflix') ||
           studio.toLowerCase().includes('apple') ||
           studio.toLowerCase().includes('amazon') ||
           studio.toLowerCase().includes('prime') ||
           studio.toLowerCase().includes('disney') ||
           studio.toLowerCase().includes('hbo') ||
           studio.toLowerCase().includes('sony') ||
           studio.toLowerCase().includes('paramount') ||
           studio.toLowerCase().includes('peacock') ||
           studio.toLowerCase().includes('hulu') ||
           studio.toLowerCase().includes('showtime') ||
           studio.toLowerCase().includes('starz') ||
           studio.toLowerCase().includes('warner') ||
           studio.toLowerCase().includes('universal');
  }

  async function load() {
    try {
      // First, test if the API is working at all
      try {
        const testUrl = ApiClient.getUrl('StudioDashboard/Test');
        const testResult = await ApiClient.getJSON(testUrl);
        console.log('StudioDashboard API Test:', testResult);
      } catch (testError) {
        console.error('StudioDashboard API Test failed:', testError);
      }
      
      const top = parseInt(topEl.value || '0', 10);
      const q = (qEl.value || '').trim();
      const filter = filterEl.value || 'all';
      
      const url = ApiClient.getUrl('StudioDashboard/StudiosWithLogos', { 
        Top: top > 0 ? top : null, 
        Q: q || null,
        Filter: filter !== 'all' ? filter : null
      });
      
      console.log('Calling StudioDashboard API:', url);
      const list = await ApiClient.getJSON(url);
      console.log('Received data:', list);
      render(list || []);
    } catch (error) {
      console.error('Fehler beim Laden der Studios:', error);
      container.innerHTML = '<div class="no-services">Fehler beim Laden der Streaming-Studios: ' + (error.message || error) + '</div>';
    }
  }

  function render(list) {
    if (!list.length) { 
      container.innerHTML = '<div class="no-services">Keine Studios gefunden.</div>'; 
      return; 
    }
    
    container.innerHTML = '';
    
    list.forEach(studio => {
      const card = document.createElement('div');
      card.className = `streaming-service-card ${getServiceClass(studio.Studio)}`;
      
      const logoUrl = logoUrls[studio.Studio] || null;
      
      card.innerHTML = `
        <div class="service-overlay"></div>
        <div class="service-content">
          ${logoUrl ? `<img src="${logoUrl}" alt="${studio.Studio}" class="service-logo">` : ''}
          <div class="service-name">${studio.Studio}</div>
          <div class="service-count">${studio.Count} ${studio.Count === 1 ? 'Medium' : 'Medien'}</div>
        </div>
      `;
      
      card.onclick = () => {
        // Emby-Suche nach diesem Studio öffnen
        const route = Emby.Page.translateUrl(`#!/search?query=${encodeURIComponent(studio.Studio)}`);
        Emby.Page.show(route);
      };
      
      container.appendChild(card);
    });
  }

  page.addEventListener('viewshow', load);
  topEl.addEventListener('change', load);
  filterEl.addEventListener('change', load);
  qEl.addEventListener('input', () => { 
    clearTimeout(window._sdh_t); 
    window._sdh_t = setTimeout(load, 300); 
  });
})();
</script>