fix(YouTube): Show video chapter titles without clipping when overlay buttons are enabled

src/main/kotlin/app/revanced/patches/youtube/misc/playercontrols/BottomControlsResourcePatch.kt

@@ -1,10 +1,13 @@
 package app.revanced.patches.youtube.misc.playercontrols
 
 import app.revanced.patcher.data.ResourceContext
+import app.revanced.patcher.patch.PatchException
 import app.revanced.patcher.patch.ResourcePatch
 import app.revanced.patcher.patch.annotation.Patch
 import app.revanced.patcher.util.DomFileEditor
 import app.revanced.patches.shared.misc.mapping.ResourceMappingPatch
+import app.revanced.util.findElementByAttributeValue
+import org.w3c.dom.Element
 import java.io.Closeable
 
 @Patch(dependencies = [ResourceMappingPatch::class])
@@ -14,17 +17,28 @@ object BottomControlsResourcePatch : ResourcePatch(), Closeable {
     private const val TARGET_RESOURCE_NAME = "youtube_controls_bottom_ui_container.xml"
     private const val TARGET_RESOURCE = "res/layout/$TARGET_RESOURCE_NAME"
 
-    // The element to the left of the element being added.
-    private var lastLeftOf = "fullscreen_button"
-
     private lateinit var resourceContext: ResourceContext
     private lateinit var targetDocumentEditor: DomFileEditor
+    private lateinit var targetElement : Element
 
     override fun execute(context: ResourceContext) {
+        bottomUiContainerResourceId = ResourceMappingPatch["id", "bottom_ui_container_stub"]
+
         resourceContext = context
         targetDocumentEditor = context.xmlEditor[TARGET_RESOURCE]
 
-        bottomUiContainerResourceId = ResourceMappingPatch["id", "bottom_ui_container_stub"]
+        // Add all buttons to an inner layout, to prevent audio track and other
+        // YT buttons from being inserted into the middle.
+        targetElement = targetDocumentEditor.file.createElement("LinearLayout")
+        targetElement.setAttribute("android:layout_height", "wrap_content")
+        targetElement.setAttribute("android:layout_width", "wrap_content")
+
+        val bottomContainer = targetDocumentEditor.file.childNodes.findElementByAttributeValue(
+            "android:id",
+            "@id/bottom_end_container"
+        ) ?: throw PatchException("Could not find target element")
+
+        bottomContainer.appendChild(targetElement)
     }
 
     /**
@@ -38,33 +52,19 @@ object BottomControlsResourcePatch : ResourcePatch(), Closeable {
                 "$resourceDirectoryName/host/layout/$TARGET_RESOURCE_NAME",
             )!!,
         ]
-        val sourceDocument = sourceDocumentEditor.file
-        val targetDocument = targetDocumentEditor.file
 
-        val targetElementTag = "android.support.constraint.ConstraintLayout"
-
-        val sourceElements = sourceDocument.getElementsByTagName(targetElementTag).item(0).childNodes
-        val targetElement = targetDocument.getElementsByTagName(targetElementTag).item(0)
+        val sourceElements = sourceDocumentEditor.file.getElementsByTagName(
+            "android.support.constraint.ConstraintLayout"
+        ).item(0).childNodes
 
+        // Copy the patch layout xml into the target layout file.
         for (index in 1 until sourceElements.length) {
             val element = sourceElements.item(index).cloneNode(true)
 
-            // If the element has no attributes there's no point to adding it to the destination.
-            if (!element.hasAttributes()) continue
-
-            // Set the elements lastLeftOf attribute to the lastLeftOf value.
-            val namespace = "@+id"
-            element.attributes.getNamedItem("yt:layout_constraintRight_toLeftOf").nodeValue =
-                "$namespace/$lastLeftOf"
-
-            // Set lastLeftOf attribute to the current element.
-            val nameSpaceLength = 5
-            lastLeftOf = element.attributes.getNamedItem("android:id").nodeValue.substring(nameSpaceLength)
-
-            // Add the element.
-            targetDocument.adoptNode(element)
+            targetDocumentEditor.file.adoptNode(element)
             targetElement.appendChild(element)
         }
+
         sourceDocumentEditor.close()
     }
 

src/main/kotlin/app/revanced/util/ResourceUtils.kt

@@ -3,6 +3,7 @@ package app.revanced.util
 import app.revanced.patcher.data.ResourceContext
 import app.revanced.patcher.util.DomFileEditor
 import app.revanced.util.resource.BaseResource
+import org.w3c.dom.Element
 import org.w3c.dom.Node
 import org.w3c.dom.NodeList
 import java.io.InputStream
@@ -49,7 +50,7 @@ fun ResourceContext.copyResources(
     sourceResourceDirectory: String,
     vararg resources: ResourceGroup,
 ) {
-    val targetResourceDirectory = this.get("res")
+    val targetResourceDirectory = this["res", false]
 
     for (resourceGroup in resources) {
         resourceGroup.resources.forEach { resource ->
@@ -164,3 +165,24 @@ internal fun Node.addResource(
 }
 
 internal fun org.w3c.dom.Document.getNode(tagName: String) = this.getElementsByTagName(tagName).item(0)
+
+internal fun NodeList.findElementByAttributeValue(attributeName: String, value: String): Element? {
+    for (i in 0 until length) {
+        val node = item(i)
+        if (node.nodeType == Node.ELEMENT_NODE) {
+            val element = node as Element
+
+            if (element.getAttribute(attributeName) == value) {
+                return element
+            }
+
+            // Recursively search.
+            val found = element.childNodes.findElementByAttributeValue(attributeName, value)
+            if (found != null) {
+                return found
+            }
+        }
+    }
+
+    return null
+}

src/main/resources/copyvideourl/host/layout/youtube_controls_bottom_ui_container.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:yt="http://schemas.android.com/apk/res-auto" android:id="@+id/youtube_controls_bottom_ui_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layoutDirection="ltr">
-    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_copy_video_url_timestamp_button" android:paddingLeft="12dp" android:paddingTop="22dp" android:paddingRight="12dp" android:paddingBottom="16dp" android:longClickable="false" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/revanced_yt_copy_timestamp" android:scaleType="center" yt:layout_constraintBottom_toTopOf="@+id/quick_actions_container" yt:layout_constraintRight_toLeftOf="@+id/fullscreen_button" style="@style/YouTubePlayerButton"/>
-    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_copy_video_url_button" android:paddingLeft="12dp" android:paddingTop="22dp" android:paddingRight="12dp" android:paddingBottom="16dp" android:longClickable="false" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/revanced_yt_copy" android:scaleType="center" yt:layout_constraintBottom_toTopOf="@+id/quick_actions_container" yt:layout_constraintRight_toLeftOf="@+id/fullscreen_button" style="@style/YouTubePlayerButton"/>
+    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_copy_video_url_timestamp_button" android:longClickable="false" android:paddingTop="3dp" android:paddingBottom="0dp" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/revanced_yt_copy_timestamp" android:scaleType="center" style="@style/YouTubePlayerButton"/>
+    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_copy_video_url_button" android:longClickable="false" android:paddingTop="3dp" android:paddingBottom="0dp" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/revanced_yt_copy" android:scaleType="center" style="@style/YouTubePlayerButton"/>
 </android.support.constraint.ConstraintLayout>

src/main/resources/downloads/host/layout/youtube_controls_bottom_ui_container.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:yt="http://schemas.android.com/apk/res-auto" android:id="@+id/youtube_controls_bottom_ui_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layoutDirection="ltr">
-    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_external_download_button" android:paddingLeft="12dp" android:paddingTop="22dp" android:paddingRight="12dp" android:paddingBottom="16dp" android:longClickable="false" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/revanced_yt_download_button" android:scaleType="center" yt:layout_constraintBottom_toTopOf="@+id/quick_actions_container" yt:layout_constraintRight_toLeftOf="@+id/fullscreen_button" style="@style/YouTubePlayerButton"/>
+    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_external_download_button" android:longClickable="false" android:paddingTop="3dp" android:paddingBottom="0dp" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/revanced_yt_download_button" android:scaleType="center" style="@style/YouTubePlayerButton"/>
 </android.support.constraint.ConstraintLayout>

src/main/resources/speedbutton/host/layout/youtube_controls_bottom_ui_container.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:yt="http://schemas.android.com/apk/res-auto" android:id="@+id/youtube_controls_bottom_ui_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layoutDirection="ltr">
-    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_playback_speed_dialog_button" android:paddingLeft="12dp" android:paddingTop="22dp" android:paddingRight="12dp" android:paddingBottom="16dp" android:longClickable="false" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/revanced_playback_speed_dialog_button" android:scaleType="center" yt:layout_constraintBottom_toTopOf="@+id/quick_actions_container" yt:layout_constraintRight_toLeftOf="@+id/fullscreen_button" style="@style/YouTubePlayerButton"/>
+    <com.google.android.libraries.youtube.common.ui.TouchImageView android:id="@+id/revanced_playback_speed_dialog_button" android:longClickable="false" android:paddingTop="3dp" android:paddingBottom="0dp" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/revanced_playback_speed_dialog_button" android:scaleType="center" style="@style/YouTubePlayerButton"/>
 </android.support.constraint.ConstraintLayout>