Merge branch 'main' into nuxt

.gitignore

@@ -6,6 +6,7 @@
 .idea/
 .vscode/
 .swp
+*.iml
 
 # General detritus
 logs/

api/api/controllers/elasticsearch/helpers.py

@@ -12,7 +12,7 @@
 
 def log_timing_info(func):
     @functools.wraps(func)
-    def wrapper(*args, **kwargs):
+    def wrapper(*args, es_query, **kwargs):
         start_time = time.time()
 
         # Call the original function
@@ -22,12 +22,12 @@ def wrapper(*args, **kwargs):
         if hasattr(result, "took"):
             es_time_in_ms = result.took
         else:
-            es_time_in_ms = result["took"]
+            es_time_in_ms = result.get("took")
         log.info(
             {
                 "response_time": response_time_in_ms,
                 "es_time": es_time_in_ms,
-                "search_query": kwargs.get("search_query"),
+                "es_query": es_query,
             }
         )
 
@@ -37,7 +37,7 @@ def wrapper(*args, **kwargs):
 
 
 @log_timing_info
-def get_es_response(s, search_query=None):
+def get_es_response(s, *args, **kwargs):
     if settings.VERBOSE_ES_RESPONSE:
         log.info(pprint.pprint(s.to_dict()))
 
@@ -53,5 +53,5 @@ def get_es_response(s, search_query=None):
 
 
 @log_timing_info
-def get_raw_es_response(index, body, search_query=None, **kwargs):
-    return settings.ES.search(index=index, body=body, **kwargs)
+def get_raw_es_response(index, body, *args, **kwargs):
+    return settings.ES.search(index=index, body=body, *args, **kwargs)

api/api/controllers/search_controller.py

@@ -223,7 +223,7 @@ def _post_process_results(
                 end = search_results.hits.total.value
 
             s = s[start:end]
-            search_response = get_es_response(s, "postprocess_search")
+            search_response = get_es_response(s, es_query="postprocess_search")
 
             return _post_process_results(
                 s, start, end, page_size, search_response, filter_dead
@@ -448,7 +448,7 @@ def search(
     # Paginate
     start, end = _get_query_slice(s, page_size, page, filter_dead)
     s = s[start:end]
-    search_response = get_es_response(s, "search")
+    search_response = get_es_response(s, es_query="search")
 
     results = _post_process_results(
         s, start, end, page_size, search_response, filter_dead
@@ -545,7 +545,7 @@ def related_media(uuid: str, index: str, filter_dead: bool) -> list[Hit]:
     start, end = _get_query_slice(s, page_size, page, filter_dead)
     s = s[start:end]
 
-    response = get_es_response(s, "related_media")
+    response = get_es_response(s, es_query="related_media")
     results = _post_process_results(s, start, end, page_size, response, filter_dead)
     return results or []
 
@@ -586,7 +586,10 @@ def get_sources(index):
         }
         try:
             results = get_raw_es_response(
-                index=index, body=body, search_query="sources", request_cache=True
+                index=index,
+                body=body,
+                request_cache=True,
+                es_query="sources",
             )
             buckets = results["aggregations"]["unique_sources"]["buckets"]
         except NotFoundError:

api/api/utils/search_context.py

@@ -44,7 +44,7 @@ def build(
         # results.
         filtered_index_slice = filtered_index_search[: len(all_result_identifiers)]
         results_in_filtered_index = get_es_response(
-            filtered_index_slice, "filtered_index_context"
+            filtered_index_slice, es_query="filtered_index_context"
         )
         filtered_index_identifiers = {
             result.identifier for result in results_in_filtered_index

documentation/catalog/guides/adding_a_new_provider.md

@@ -60,18 +60,18 @@ that can be used to generate the files you'll need and get you started:
 # MEDIA: Optionally, a space-delineated list of media types ingested by this provider
 #        (and supported by Openverse). If not provided, defaults to "image".
 
-> just add-provider <PROVIDER_NAME> <ENDPOINT> <MEDIA>
+> just catalog/add-provider <PROVIDER_NAME> <ENDPOINT> <MEDIA>
 
 # Example usages:
 
 # Creates a provider that supports just audio
-> just add-provider TestProvider https://test.test/search audio
+> just catalog/add-provider TestProvider https://test.test/search audio
 
 # Creates a provider that supports images and audio
-> just add-provider "Foobar Museum" https://foobar.museum.org/api/v1 image audio
+> just catalog/add-provider "Foobar Museum" https://foobar.museum.org/api/v1 image audio
 
 # Creates a provider that supports the default, just image
-> just add-provider TestProvider https://test.test/search
+> just catalog/add-provider TestProvider https://test.test/search
 ```
 
 You should see output similar to this:

frontend/package.json

@@ -72,7 +72,6 @@
     "async-mutex": "^0.3.2",
     "axios": "^0.27.0",
     "axios-mock-adapter": "^1.20.0",
-    "case": "^1.6.3",
     "clipboard": "^2.0.11",
     "cookie-universal-nuxt": "^2.1.5",
     "core-js": "^3.27.2",

frontend/src/components/VAudioTrack/VAudioControl.vue

@@ -1,7 +1,7 @@
 <template>
   <VIconButton
     :tabindex="isTabbable ? 0 : -1"
-    class="play-pause"
+    class="audio-control"
     :size="buttonSize"
     variant="filled-dark"
     :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
@@ -52,12 +52,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} as const
+const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
+  {
+    row: ["end"],
+    global: ["top", "end"],
+    box: [],
+    full: [],
+  } as const
 
 /**
  * The mapping of play-pause control sizes to the VIconButton sizes
@@ -137,8 +138,8 @@ export default defineComponent({
      */
     const connections = computed(() => {
       return props.layout === "row" && props.size === "small"
-        ? "none"
-        : layoutConnectionsMap[props.layout]
+        ? []
+        : [...layoutConnectionsMap[props.layout]]
     })
 
     /** Convert the `play-pause` sizes to `VIconButton` sizes */

frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="audio-track" :aria-label="ariaLabel" role="region">
+  <div
+    class="audio-track relative rounded"
+    :aria-label="ariaLabel"
+    role="region"
+  >
     <VGlobalLayout :audio="audio">
       <template #controller="waveformProps">
         <VWaveform
@@ -14,9 +18,10 @@
         />
       </template>
 
-      <template #play-pause="playPauseProps">
-        <VPlayPause
-          v-bind="playPauseProps"
+      <template #audio-control="{ size, layout }">
+        <VAudioControl
+          :size="size"
+          :layout="layout"
           :status="status"
           @toggle="handleToggle"
         />
@@ -40,7 +45,7 @@ import type { AudioInteraction } from "~/types/analytics"
 import type { AudioDetail } from "~/types/media"
 import type { AudioStatus } from "~/constants/audio"
 
-import VPlayPause from "~/components/VAudioTrack/VPlayPause.vue"
+import VAudioControl from "~/components/VAudioTrack/VAudioControl.vue"
 import VWaveform from "~/components/VAudioTrack/VWaveform.vue"
 import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 
@@ -51,7 +56,7 @@ import VGlobalLayout from "~/components/VAudioTrack/layouts/VGlobalLayout.vue"
 export default defineComponent({
   name: "VGlobalAudioTrack",
   components: {
-    VPlayPause,
+    VAudioControl,
     VWaveform,
     VGlobalLayout,
   },

frontend/src/components/VAudioTrack/VPlayPause.vue

@@ -45,12 +45,13 @@ const statusIconMap = {
   loading: undefined,
 } as const
 
-const layoutConnectionsMap: Record<AudioLayout, ButtonConnections> = {
-  row: "end",
-  global: "all",
-  box: "none",
-  full: "none",
-} as const
+const layoutConnectionsMap: Record<AudioLayout, readonly ButtonConnections[]> =
+  {
+    row: ["end"],
+    global: ["top", "end"],
+    box: [],
+    full: [],
+  } as const
 
 /**
  * Displays the control for switching between the playing and paused states of
@@ -109,7 +110,7 @@ export default defineComponent({
     const buttonProps = computed(() => {
       const variant = "plain--avoid" as ButtonVariant
 
-      return { variant, connections: layoutConnectionsMap[props.layout] }
+      return { variant, connections: [...layoutConnectionsMap[props.layout]] }
     })
 
     const handleMouseDown = (event: MouseEvent) => {

frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="global-track flex w-full flex-row">
-    <div class="flex-shrink-0">
-      <VAudioThumbnail :audio="audio" />
-      <slot name="play-pause" size="large" layout="global" />
+  <div
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-dark-charcoal ring-opacity-20"
+  >
+    <div class="h-12 w-12 rounded-ss">
+      <VAudioThumbnail class="rounded-ss" :audio="audio" />
     </div>
 
-    <div class="relative flex-grow">
+    <div class="flex h-12 items-center justify-between rounded-se bg-white">
       <VLink
         :href="`/audio/${audio.id}`"
-        class="hover-underline absolute inset-x-0 top-[10.5px] z-10 line-clamp-2 flex flex-row items-center justify-between px-4 pe-12 text-sr font-semibold text-dark-charcoal"
+        class="hover-underline label-bold z-10 flex flex-row items-center px-3 pe-12 text-dark-charcoal"
         :class="{ 'blur-text': shouldBlur }"
       >
         {{ shouldBlur ? $t("sensitiveContent.title.audio") : audio.title }}
       </VLink>
-
-      <slot name="controller" :usable-frac="0.5" />
     </div>
+    <slot name="audio-control" size="medium" layout="global" />
+    <slot name="controller" :usable-frac="1" />
   </div>
 </template>
 
@@ -52,12 +53,20 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 .global-track .thumbnail {
-  @apply h-14 w-14;
+  @apply h-12 w-12 rounded-ss;
+}
+.global-track .thumbnail img,
+.global-track .thumbnail ~ svg {
+  @apply rounded-ss;
 }
 
 .global-track .waveform {
-  @apply h-full;
+  @apply h-full rounded-ee;
+  --waveform-background-color: theme("colors.white");
+}
+.global-track .audio-control {
+  @apply rounded-es;
 }
 </style>

frontend/src/components/VButton.vue

@@ -7,9 +7,9 @@
       $style.button,
       $style[variant],
       $style[`size-${size}${iconOnly ? '-icon-only' : ''}`],
+      connectionStyles,
       {
         [$style[`${variant}-pressed`]]: isActive,
-        [$style[`connection-${connections}`]]: isConnected,
         [$style[`icon-start-${size}`]]: hasIconStart,
         [$style[`icon-end-${size}`]]: hasIconEnd,
         [$style[`icon-only`]]: iconOnly,
@@ -159,13 +159,12 @@ const VButton = defineComponent({
     /**
      * Whether the button is connected to another control and needs to have no rounded
      * borders at that edge.
-     * `all` means that the button is not rounded.
      *
-     * @default 'none'
+     * @default []
      */
     connections: {
-      type: String as PropType<ButtonConnections>,
-      default: "none",
+      type: Array as PropType<ButtonConnections[]>,
+      default: () => [] as ButtonConnections[],
     },
     /**
      * Whether the button has an icon at the inline start of the button.
@@ -203,7 +202,11 @@ const VButton = defineComponent({
     const typeRef = ref<ButtonType | undefined>(propsRef.type.value)
     const supportsDisabledAttributeRef = ref(true)
 
-    const isConnected = computed(() => props.connections !== "none")
+    const connectionStyles = computed(() =>
+      props.connections
+        .map((connection) => `connection-${connection}`)
+        .join(" ")
+    )
 
     const isActive = computed(() => {
       return (
@@ -272,7 +275,7 @@ const VButton = defineComponent({
       ariaDisabledRef,
       typeRef,
       isActive,
-      isConnected,
+      connectionStyles,
       isPlainDangerous,
       isFocusSlimFilled,
       isFocusSlimTx,
@@ -386,14 +389,19 @@ a.button {
 .dropdown-label-pressed {
   @apply border-tx bg-dark-charcoal text-white active:hover:border-white;
 }
+</style>
 
+<style scoped>
 .connection-start {
   @apply rounded-s-none;
 }
 .connection-end {
   @apply rounded-e-none;
 }
-.connection-all {
-  @apply rounded-none;
+.connection-top {
+  @apply rounded-se-none rounded-ss-none;
+}
+.connection-bottom {
+  @apply rounded-ee-none rounded-es-none;
 }
 </style>