Skip to content

Commit

Permalink
Merge branch 'develop' into 191-include-audio-player-for-audio-record…
Browse files Browse the repository at this point in the history 
…ings-where-it-is-possible-allowed
  • Loading branch information
@MauPalantir
MauPalantir authored Feb 3, 2025
2 parents 19b14f5 + 7a36035 commit dcda7a9
Show file tree
Hide file tree
Showing 70 changed files with 4,804 additions and 3,592 deletions.
56 changes: 45 additions & 11 deletions components/app-footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script setup lang="ts">
const env = useRuntimeConfig();
const { data: config } = useProjectInfo();
const funders = computed(() => config.value?.projectConfig?.funders ?? []);
</script>

<template>
<footer
class="inset-x-0 bottom-0 h-7 bg-surface text-on-surface transition duration-500"
onmouseleave="document.querySelector('footer').classList.remove('-translate-y-80')"
onmouseleave="document.querySelector('footer').style.transform = `translateY(0)`"
>
<div class="flex items-center gap-2 border px-8 py-1.5 text-xs">
<div
class="h-4 flex-1"
onmouseover="document.querySelector('footer').classList.add('-translate-y-80')"
onmouseover="document.querySelector('footer').style.transform = `translateY(-${document.querySelector('#footer-content').clientHeight}px)`"
></div>
<span class="flex gap-1">
<span>&copy; {{ new Date().getUTCFullYear() }}</span>
Expand All @@ -35,10 +36,10 @@ const { data: config } = useProjectInfo();
</span>
<div
class="h-4 flex-1"
onmouseover="document.querySelector('footer').classList.add('-translate-y-80')"
onmouseover="document.querySelector('footer').style.transform = `translateY(-${document.querySelector('#footer-content').clientHeight}px)`"
></div>
</div>
<div class="mb-0 w-full bg-neutral-50 px-0 text-gray-900">
<div id="footer-content" class="mb-0 w-full bg-neutral-50 px-0 text-gray-900">
<div id="footer-full-content" class="mx-auto w-full px-4" tabindex="-1">
<div
class="footer-logo-widget mb-4 flex items-center border-b pb-4 pt-2 text-sm font-semibold"
Expand Down Expand Up @@ -75,7 +76,14 @@ const { data: config } = useProjectInfo();
</div>
</div>
<!-- .footer-widget -->
<div class="footer-widget mt-4 w-3/4 flex-none px-4 sm:w-1/2 md:w-1/3 lg:w-1/3">
<div
class="mt-4 max-w-[33.333%] flex-none px-4"
:class="
(funders.length ?? 0) > 0
? 'w-auto md:w-auto lg:w-auto'
: 'w-3/4 sm:w-1/2 md:w-1/3 lg:w-1/3'
"
>
<div>
<p class="mb-4 mt-0 block">
ACDH-CH
Expand All @@ -100,7 +108,10 @@ const { data: config } = useProjectInfo();
</div>
</div>
<!-- .footer-widget -->
<div class="footer-widget ml-auto mt-4 w-full flex-none px-4 sm:w-1/3 md:w-1/3 lg:w-1/4">
<div
class="ml-auto mt-4 w-full max-w-[33.333%] flex-none shrink-0 grow-0 px-4 sm:w-1/3 md:w-1/3 lg:w-1/4"
:class="(funders.length ?? 0) > 0 ? 'basis-1/4' : 'basis-1/3'"
>
<h6 class="mb-2 block font-bold">HELPDESK</h6>
<p class="mb-4 mt-0 block">
ACDH-CH runs a helpdesk offering advice for questions related to various digital
Expand All @@ -116,6 +127,34 @@ const { data: config } = useProjectInfo();
</p>
</div>
<!-- .footer-widget -->
<div
v-if="(funders.length ?? 0) > 0"
class="ml-auto mt-4 w-full max-w-[33.333%] shrink-0 grow-0 basis-1/4 px-4 sm:w-1/3 md:w-1/3 lg:w-1/4"
>
<h6 class="sr-only mb-2 block font-bold">Funding</h6>
<template v-for="funder in funders" :key="funder.funderLink">
<img
:alt="funder.logoID"
class="mb-4 mt-2 block"
:src="
funder.logoID?.startsWith('http')
? funder.logoID
: `/assets/images/${funder.logoID}.png`
"
/>
<p class="mb-4 mt-0 block text-sm">
{{ funder.text }}
<a
class="text-[#88dbdf] transition duration-200 ease-in-out hover:brightness-75"
:href="funder.funderLink"
target="_blank"
>
{{ funder.funderLink }}
</a>
</p>
</template>
</div>
<!-- .footer-widget -->
</div>
</div>
</div>
Expand Down Expand Up @@ -156,11 +195,6 @@ const { data: config } = useProjectInfo();
max-width: 8.333%;
}
.footer-widget {
flex: 0 0 33.333%;
max-width: 33.333%;
}
@keyframes slide-in-out {
0% {
transform: translateY(0);
Expand Down
37 changes: 24 additions & 13 deletions components/corpus-query-window-content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ const { simpleItems } = useTEIHeaders();
const props = defineProps<{ params: Zod.infer<typeof CorpusQuerySchema>["params"] }>();
const queryString = ref(props.params.queryString);
const hits = ref<Array<CorpusSearchHits & { label?: string }> | undefined>([]);
const showHelp = ref<boolean>(false);
async function searchCorpus() {
if (words.value.length > 0)
queryString.value =
'[word="' + words.value.map((w) => w.replace("*", ".*").replace("?", ".")).join("|") + '"]';
if (!queryString.value && words.value.length > 0)
queryString.value = `[word="${words.value.join("|")}"]`;
const result = await api.vicav.searchCorpus(
{ query: queryString.value },
Expand Down Expand Up @@ -61,13 +60,24 @@ const words: Ref<Array<string>> = ref([]);
<form
class="block w-full rounded border border-gray-300 bg-gray-50 p-2.5 px-4 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
>
<label class="mb-2 flex !w-40 p-0 font-bold" for="word_tags">
<span class="grow">Search for words</span>
<label class="mb-2 flex !w-48 p-0 font-bold" for="word_tags">
<span class="grow">Search for exact words</span>
<a href="#" title="More information" @click="showHelp = true"
><span class="hidden">More information</span><Info class="size-4"
/></a>
</label>
<div class="flex items-center gap-2">
<Info class="size-4" /><span class="text-gray-500"
>Enter non-accented Latin characters and select word options from the list</span
>
<div v-if="showHelp" class="flex items-center gap-2">
<span class="text-gray-500"
>Enter beginning of the word to trigger autocomplete suggestions from the words occurring
in the corpus. Autocomplete is accent-insensitive, allowing for a simplified word form
selection. Eg. "wa" will return results starting with "wā" or "ẉa" as well. <br />
Apart from the accent-insensitivity, "?" is used as a shortcut for ʔalif or ʕayn.<br />
Instead of choosing exact word forms from autocomplete results, you can enter a word with
wildcards and add it to the queried words by pressing enter. Supported wildcards: ".?"
stand for one character ".*" stands for multiple characters. characters.<br />
Example: w.?n would yield results like "wen", "win", "w.*n" would yield results for "wen,
win or weyn" as well.
</span>
</div>
<TagsSelect
v-if="wordOptions"
Expand All @@ -76,15 +86,16 @@ const words: Ref<Array<string>> = ref([]);
v-model:search-term="wordSearch"
:filter-function="(i) => i"
:options="wordOptions"
:placeholder="`Search for words...`"
placeholder="Search for words..."
:special-characters="specialCharacters"
/>

<label class="mb-2 flex !w-40 p-0 font-bold" for="word_tags">
<span class="grow">Advanced search</span>
</label>
<div class="mb-2 flex items-center gap-2">
<Info class="size-4" /><span class="text-gray-500"
>Enter exact words within a CQL query. (<a
>Enter a proper CQL query with exact transliateration characters. (<a
class="content-center"
href="https://howto.acdh.oeaw.ac.at/de/resources/corpus-query-language-im-austrian-media-corpus"
target="_blank"
Expand Down Expand Up @@ -131,7 +142,7 @@ const words: Ref<Array<string>> = ref([]);
</a>
</td>
<td class="pl-5 text-right" v-html="hit.content?.left"></td>
<td class="max-w-fit bg-[beige] px-[2px] text-center" v-html="hit.content?.kwic"></td>
<td class="max-w-fit bg-[beige] text-center" v-html="hit.content?.kwic"></td>
<td class="p-0" v-html="hit.content?.right"></td>
</tr>
</table>
Expand Down
115 changes: 61 additions & 54 deletions components/corpus-text-window-content.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ const { simpleItems } = useTEIHeaders();
const utterances = ref<Array<CorpusTextUtterances>>([]);
const utterancesWrapper = ref<HTMLDivElement | null>(null);
const utteranceElements = ref<Array<Element>>([]);
const infinite = ref<typeof InfiniteLoading | null>(null);
const currentPage = ref(1);
const api = useApiClient();
const scrollComplete = ref<boolean>(false);
Expand Down Expand Up @@ -87,13 +89,13 @@ const scrollParentToChild = function (parent: Element, child: Element) {
}
};
onMounted(async () => {
const u = utteranceElements.value.find((u) => u.id === props.params.u);
const window = utterancesWrapper.value?.parentElement?.parentElement;
if (u !== undefined) scrollParentToChild(window!, u);
});
watch(utteranceElements.value, (value) => {
if (props.params.u) {
const window = utterancesWrapper.value?.parentElement?.parentElement;
const u = utteranceElements.value.find((u) => u.id === props.params.u);
if (u) scrollParentToChild(window!, u);
else if (infinite.value) scrollParentToChild(window!, infinite!.value.$el);
}
if (value.length > 0) {
value.forEach((u) => {
const playButton = u.querySelector("a.play");
Expand Down Expand Up @@ -121,58 +123,63 @@ watch(utteranceElements.value, (value) => {
</script>

<template>
<!-- eslint-disable tailwindcss/no-custom-classname, vue/no-v-html -->
<div :id="params.textId" ref="utterancesWrapper" class="p-4">
<h2 class="m-3 text-lg">{{ props.params.label }}</h2>
<div>
<div v-if="params.showCitation">
<Citation :header="teiHeader" type="entry" />
</div>
<!-- eslint-disable tailwindcss/no-custom-classname, vue/no-v-html -->
<div :id="params.textId" ref="utterancesWrapper" class="p-4">
<h2 class="m-3 text-lg">{{ props.params.label }}</h2>

<table class="m-3 border border-gray-300">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<th>Contributed by:</th>
<td>{{ teiHeader?.resp }}</td>
</tr>
<tr>
<th>Speakers:</th>
<table class="m-3 border border-gray-300">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<th>Recording:</th>
<td>{{ teiHeader?.resp }}</td>
</tr>
<tr>
<th>Speakers:</th>
<td>
<span v-for="(person, index) in teiHeader?.person" :key="index">
{{ person.name }} (age: {{ person.age }}, sex: {{ person.sex }})
<span v-if="index < (teiHeader?.person.length || 1) - 1">, </span>
</span>
</td>
</tr>
</tbody>
</table>
<table>
<tr
v-for="u in utterances"
:id="u.id"
:key="u.id"
ref="utteranceElements"
class="corpus-utterance u table-row"
>
<td>
<span v-for="(person, index) in teiHeader?.person" :key="index">
{{ person.name }} (age: {{ person.age }}, sex: {{ person.sex }})
<span v-if="index < (teiHeader?.person.length || 1) - 1">, </span>
</span>
<a v-if="u.audio" class="play mt-1"
><Play class="size-4" /><span class="hidden">Play</span></a
>
<a v-if="u.audio" class="stop mt-1 hidden">
<Pause class="size-4" /><span class="hidden">Stop</span>
</a>
<!-- eslint-disable-next-line vuejs-accessibility/media-has-caption -->
<audio v-if="u.audio" hidden="hidden">
<source :src="u.audio" />
</audio>
</td>
<th class="min-w-fit px-3 font-bold">
{{ u.id }}
</th>
<td class="table-cell" v-html="u.content"></td>
</tr>
</tbody>
</table>
<table>
<tr
v-for="u in utterances"
:id="u.id"
:key="u.id"
ref="utteranceElements"
class="corpus-utterance u table-row"
>
<td>
<a v-if="u.audio" class="play mt-1"
><Play class="size-4" /><span class="hidden">Play</span></a
>
<a v-if="u.audio" class="stop mt-1 hidden">
<Pause class="size-4" /><span class="hidden">Stop</span>
</a>
<!-- eslint-disable-next-line vuejs-accessibility/media-has-caption -->
<audio v-if="u.audio" hidden="hidden">
<source :src="u.audio" />
</audio>
</td>
<th class="min-w-fit px-3 font-bold">
{{ u.id }}
</th>
<td class="table-cell" v-html="u.content"></td>
</tr>
</table>
<InfiniteLoading v-if="!scrollComplete" @infinite="handleInfiniteScroll" />
</table>
<InfiniteLoading v-if="!scrollComplete" ref="infinite" @infinite="handleInfiniteScroll" />
</div>
</div>
</template>

Expand Down
29 changes: 9 additions & 20 deletions components/data-list-window-content.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!-- eslint-disable @typescript-eslint/sort-type-constituents -->
<script lang="ts" setup>
import { Volume2, VolumeX } from "lucide-vue-next";
import type { JsonObject } from "type-fest";

import type { DataListWindowItem, DataTypesEnum } from "@/types/global.d";
Expand Down Expand Up @@ -82,7 +83,7 @@ const debugString = debug ? JSON.stringify(groupedItems, null, 2) : "";
{{ dataTypes[dataType]!.name }}
</em>
<ul v-for="item in items" :key="item.id">
<li class="text-base">
<li class="flex text-base">
<a
v-if="item.dataType !== 'CorpusText' || item['@hasTEIw'] === 'true'"
class="text-primary underline"
Expand All @@ -94,27 +95,15 @@ const debugString = debug ? JSON.stringify(groupedItems, null, 2) : "";
{{ item.label }}
</a>
<span v-else> {{ item.label }} </span>
<span> &nbsp; </span>
<span
v-if="
item.teiHeader.fileDesc.sourceDesc.recordingStmt &&
(item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.media?.['@url'] ||
item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.p?.ref)
"
v-if="item.audioAvailability === 'free'"
title="Audio recording is publicly available"
>
&nbsp; {{ item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording["@type"] }}
<span v-if="item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.media">
: {{ item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.media["@url"] }}
</span>
<span v-if="item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.p?.ref">
:
{{
item.teiHeader.fileDesc.sourceDesc.recordingStmt.recording.p.ref["@target"]
}}
</span>
<span v-if="item.teiHeader.profileDesc?.settingDesc?.setting?.placeName.$">
:
{{ item.teiHeader.profileDesc.settingDesc.setting.placeName.$ }}
</span>
<Volume2 class="mx-2 mt-[2px] size-5" />
</span>
<span v-else title="Audio recording is restricted">
<VolumeX class="mx-2 mt-[2px] size-5" />
</span>
</li>
</ul>
Expand Down
Loading

0 comments on commit dcda7a9

Please sign in to comment.