]);
$this->addField('file_upload', Files::class, 'Fichier', ['maxFiles' => 100]);
$this->addField('file_thumb', Files::class, 'Miniature', ['when' => ['type' => ['audio', 'video', 'pdf']], 'hint' => 'Image utilisée sur la page "Médiathèque" ou "Resources"']);
- $this->addField('theme', SelectFromModel::class, 'Thème', ['when' => ['type' => ['audio', 'video']], 'optionsmodel' => AssetTheme::class, 'allows_null' => true, 'column' => true, 'hint' => 'Choisir un thème pour ajouter à la page "Médiathèque"']);
+ $this->addField('theme', SelectFromModel::class, 'Chapitres', ['when' => ['type' => ['audio', 'video']], 'optionsmodel' => AssetTheme::class, 'allows_null' => true, 'allows_multiple' => true, 'column' => true, 'hint' => 'Choisir un thème pour ajouter à la page "Médiathèque"']);
$this->addField('keywords', Tags::class, 'Mots-clé', ['column' => true]);
}
{{-- Filter Options --}}
<div class="flex flex-col lg:flex-row mt-15">
- {{-- Media Type Filters --}}
- <div class="lg:w-1/3">
- <h3 class="font-medium text-4xl mb-5">Média</h3>
- <div class="grid grid-cols-1 gap-5">
- @foreach($types as $type_id => $type)
- <label>
- <input type="checkbox"
- value="media-{{ $type_id }}"
- x-model="activeTypeFilters"
- class="peer sr-only">
- <span class="inline-block cursor-pointer
- font-secondary font-medium
- py-2.5 px-5 rounded-full border
- peer-checked:bg-white peer-checked:text-black
- transition">
- {{ $type }}
- </span>
- </label>
- @endforeach
- </div>
- </div>
-
{{-- Theme Filters --}}
<div class="mt-15 lg:mt-0 lg:w-2/3">
- <h3 class="font-medium text-4xl mb-5">Thème</h3>
+ <h3 class="font-medium text-4xl mb-5">Chapitres</h3>
<div class="grid grid-cols-2 gap-5">
@foreach($themes as $theme_id => $theme)
<label>
Filtrer
</a>
- {{-- ACTIVE [MEDIA TYPE] FILTERS (JS) --}}
- {{-- Media types must be filtered separately from themes --}}
- <template x-for="activeTypeFilter in activeTypeFilters">
- <div class="relative inline-flex
- py-4 pl-4 pr-12
- rounded-full border border-grey-200
- leading-none
- font-secondary font-medium text-black">
- <span x-text="filters[activeTypeFilter]" class="whitespace-nowrap"></span>
- {{-- REMOVE (X) ICON --}}
- <a href="#"
- @click.prevent="removeTypeFilter(activeTypeFilter)"
- class="absolute w-7 h-7 right-2 top-1/2 transform -translate-y-1/2
- flex items-center justify-center
- rounded-full bg-grey-200 text-current">
- <svg class="stroke-current" xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 10.828 10.828">
- <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
- <path d="m1.414 9.414 8-8"/>
- <path data-name="Path 46" d="m1.414 1.414 8 8"/>
- </g>
- </svg>
- </a>
- </div>
- </template>
-
{{-- ACTIVE [THEME] FILTERS (JS) --}}
<template x-for="activeThemeFilter in activeThemeFilters">
<div class="relative inline-flex
rounded-full border border-grey-200
leading-none
font-secondary font-medium text-black">
- <span x-text="filters[activeThemeFilter]" class="whitespace-nowrap"></span>
+ <span x-text="filters[activeThemeFilter]['name']" class="whitespace-nowrap"></span>
{{-- REMOVE (X) ICON --}}
<a href="#"
@click.prevent="removeThemeFilter(activeThemeFilter)"
return ["media-$key" => $item];
});
$theme_filters = collect($themes)->mapWithKeys(function($item, $key) {
- return ["theme-$key" => $item];
+ return ["theme-$key" => ['name'=>$item['name']]];
});
$filters = array_merge($media_filters->toArray(), $theme_filters->toArray());
{{-- See media_library() definition in resources/js/media-library.js --}}
<div x-data="media_library({ filters: {{ json_encode($filters) }} })">
- <x-media-library.filter-list />
+ <x-media-library.filter-list/>
{{-- MEDIA LIBRARY GRID --}}
{{-- Negative margins applied here to offset margins used in Isotope grid --}}
@foreach ($media as $item)
@php
- $theme=$themes[$item['theme']];
+ $filters=[];
+ if(!is_array($item['theme'])){
+ $item['theme']=[$item['theme']];
+ }
+ foreach ($item['theme'] as $t){
+ $filters[]='theme-'.$t;
+ }
+ $theme=$themes[$item['theme'][0]];
$player_data = [
'ID' => $item['id'],
'player' => [
data-player='{{ json_encode($player_data) }}'
class="media-item group cursor-pointer
{{-- Width is 25% minus the gutters (2 * 0.625rem that comes from mx-2.5) --}}
- float-left w-[calc(100%/2-1.25rem)] md:w-[calc(100%/3-1.25rem)] lg:w-[calc(100%/4-1.25rem)] mx-2.5 mb-16
- media-{{ $item['type'] }}
- theme-{{ $item['theme'] }}"
- >
- <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-color:#ddd;background-image:url({{ $item['image'] }})">
+ float-left w-[calc(100%/2-1.25rem)] md:w-[calc(100%/3-1.25rem)] lg:w-[calc(100%/4-1.25rem)] mx-2.5 mb-16
+ {{ implode(' ',$filters) }}
+ ">
+ <div class=" media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]"
+ style="background-color:#ddd;background-image:url({{ $item['image'] }})">
- {{-- Play Icon --}}
- <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition group-hover:scale-110"
- xmlns="http://www.w3.org/2000/svg" width="22.47%" viewBox="0 0 59.999 59.999">
- {{-- Icon BG --}}
- <path d="M0 29.999a30 30 0 1 0 30-30 30 30 0 0 0-30 30Z" fill="#0725e2"/>
+ {{-- Play Icon --}}
+ <svg
+ class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition group-hover:scale-110"
+ xmlns="http://www.w3.org/2000/svg" width="22.47%" viewBox="0 0 59.999 59.999">
+ {{-- Icon BG --}}
+ <path d="M0 29.999a30 30 0 1 0 30-30 30 30 0 0 0-30 30Z" fill="#0725e2"/>
- <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
- @if ($item['type'] === 'audio')
- {{-- Audio Play Icon --}}
-
<path d="M15.999 25.324h5.324v9.317h-5.324Z"/>
-
<path d="M35.321 24.635a7.561 7.561 0 0 1 0 10.693 7.523 7.523 0 0 0 0-10.693Z"/>
-
<path d="M39.644 21.627a11.815 11.815 0 0 1 0 16.709 11.756 11.756 0 0 0 0-16.709Z"/>
-
<path d="M21.323 25.324 30.64 20v19.966l-9.317-5.325Z"/>
- @else
- {{-- Video Play Icon --}}
- <path d="m26.5 38.5 12-8-12-8Z" />
- @endif
- </g>
- </svg>
+ <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+ @if ($item['type'] === 'audio')
+ {{-- Audio Play Icon --}}
+ <path d="M15.999 25.324h5.324v9.317h-5.324Z"/>
+ <path d="M35.321 24.635a7.561 7.561 0 0 1 0 10.693 7.523 7.523 0 0 0 0-10.693Z"/>
+ <path d="M39.644 21.627a11.815 11.815 0 0 1 0 16.709 11.756 11.756 0 0 0 0-16.709Z"/>
+ <path d="M21.323 25.324 30.64 20v19.966l-9.317-5.325Z"/>
+ @else
+ {{-- Video Play Icon --}}
+ <path d="m26.5 38.5 12-8-12-8Z"/>
+ @endif
+ </g>
+ </svg>
- <x-duration class="absolute bottom-2 right-2 font-secondary text-white"
- style="text-shadow: rgb(0 0 0 / 50%) 0 0.1em 0.2em">
- {{ $item['duration'] }}
- </x-duration>
- </div>
- {{-- THEME LABEL --}}
- <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $theme['color'] }}">
- {{ $theme['name'] }}
- </div>
- {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}}
- <div class="mt-1.5 font-semibold leading-snug min-h-[2.75em]">
- {{ $item['title'] }}
- </div>
- </div>
- @endforeach
+ <x-duration class="absolute bottom-2 right-2 font-secondary text-white"
+ style="text-shadow: rgb(0 0 0 / 50%) 0 0.1em 0.2em">
+ {{ $item['duration'] }}
+ </x-duration>
</div>
+ {{-- THEME LABEL --}}
+ <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $theme['color'] }}">
+ {{ $theme['name'] }}
+ </div>
+ {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}}
+ <div class="mt-1.5 font-semibold leading-snug min-h-[2.75em]">
+ {{ $item['title'] }}
+ </div>
+</div>
+@endforeach
+</div>
- <x-media-library.player />
+<x-media-library.player/>
- <x-media-library.filter-interface />
+<x-media-library.filter-interface/>
</div>
projects / odl.git / commitdiff