Clip.qml 41.2 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19 20
import QtQuick 2.11
import QtQuick.Controls 2.4
21
import Kdenlive.Controls 1.0
22
import QtQml.Models 2.11
23
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26 27 28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1
30 31 32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
34
    property bool isProxy: false
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
35
    property int modelStart
36
    property real scrollX: 0
37 38 39
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
40
    property int maxDuration: 0
41
    property bool isAudio: false
42
    property int audioChannels
43
    property bool showKeyframes: false
44
    property bool isGrabbed: false
45
    property bool grouped: false
46
    property var markers
47
    property var keyframeModel
48 49
    property int clipStatus: 0
    property int itemType: 0
50 51
    property int fadeIn: 0
    property int fadeOut: 0
52
    property int binId: 0
53
    property int positionOffset: 0
54
    property var parentTrack
55 56
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
57 58 59
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
60
    property int originalTrackId: -1
61
    property int originalX: x
62 63
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
64
    property int draggedX: x
65
    property bool selected: false
66
    property bool isLocked: parentTrack && parentTrack.isLocked == true
67
    property bool hasAudio
68 69
    property bool canBeAudio
    property bool canBeVideo
70
    property double speed: 1.0
71
    property color borderColor: 'black'
72
    property bool forceReloadThumb
73
    property bool isComposition: false
74
    property bool hideClipViews: false
75
    property var groupTrimData
76
    property int scrollStart: scrollView.contentX - (clipRoot.modelStart * timeline.scaleFactor)
77
    width : clipDuration * timeScale
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
78
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
79

80 81
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedIn(var clip, bool shiftTrim, bool controlTrim)
82
    signal initGroupTrim(var clip)
83 84
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedOut(var clip, bool shiftTrim, bool controlTrim)
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
85

86
    onScrollStartChanged: {
87
        clipRoot.hideClipViews = scrollStart > (clipDuration * timeline.scaleFactor) || scrollStart + scrollView.contentItem.width < 0
88
    }
89

90 91
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
92
            grabItem()
93 94
        } else {
            mouseArea.focus = false
95 96 97
        }
    }

98 99 100 101 102
    function grabItem() {
        clipRoot.forceActiveFocus()
        mouseArea.focus = true
    }

103 104
    function clearAndMove(offset) {
        controller.requestClearSelection()
105 106
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
107 108
    }

109
    onClipResourceChanged: {
110
        if (itemType == ProducerType.Color) {
111
            color: Qt.darker(getColor(), 1.5)
112 113
        }
    }
114
    ToolTip {
115
        visible: mouseArea.containsMouse && !dragProxyArea.pressed && !trimInMouseArea.containsMouse && !trimOutMouseArea.containsMouse && !fadeInMouseArea.containsMouse && !fadeOutMouseArea.containsMouse && !fadeInMouseArea.drag.active && !fadeOutMouseArea.drag.active && !trimInMouseArea.drag.active && !trimOutMouseArea.drag.active
116 117 118 119 120 121 122 123
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
124
            font: miniFont
125 126 127 128 129
            text: '%1 (%2-%3)\n%4: %5'.arg(label.text)
                        .arg(timeline.simplifiedTC(clipRoot.inPoint))
                        .arg(timeline.simplifiedTC(clipRoot.outPoint))
                        .arg(i18n("Duration"))
                        .arg(timeline.simplifiedTC(clipRoot.clipDuration))
130 131 132
        }
    }

133
    onKeyframeModelChanged: {
134
        if (effectRow.keyframecanvas) {
135
            console.log('keyframe model changed............')
136 137
            effectRow.keyframecanvas.requestPaint()
        }
138 139
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
140 141
    onClipDurationChanged: {
        width = clipDuration * timeScale;
142 143
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
            // Duration changed, we may need a different number of repeaters
144
            thumbsLoader.item.reload(1)
145
        }
146
    }
147

148 149 150
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
151

152 153 154 155 156
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
157 158 159 160 161 162 163
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
164 165
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
166 167
    }

168
    onForceReloadThumbChanged: {
169
        // TODO: find a way to force reload of clip thumbs
170
        if (thumbsLoader.item) {
171
            thumbsLoader.item.reload(0)
172
        }
173 174
    }

175
    onTimeScaleChanged: {
176
        x = modelStart * timeScale;
177
        width = clipDuration * timeScale;
178
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : clipRoot.border.width
179 180
    }
    onScrollXChanged: {
181
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : clipRoot.border.width
182 183
    }

Vincent Pinon's avatar
Vincent Pinon committed
184
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
185
    border.width: isGrabbed ? 8 : 2
186

187 188 189 190 191
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

192
    function getColor() {
193 194 195
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
196 197 198
        if (itemType == ProducerType.Text) {
            return titleColor
        }
199
        if (itemType == ProducerType.Image) {
200 201
            return imageColor
        }
202 203 204
        if (itemType == ProducerType.SlideShow) {
            return slideshowColor
        }
205
        if (itemType == ProducerType.Color) {
206 207 208
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
209
            }
210
            return '#' + color.substring(color.length - 8, color.length - 2)
211
        }
212
        return isAudio? root.audioColor : root.videoColor
213 214
    }

215
/*    function reparent(track) {
216
        console.log('TrackId: ',trackId)
217 218
        parent = track
        height = track.height
219
        parentTrack = track
220
        trackId = parentTrack.trackId
221
        console.log('Reparenting clip to Track: ', trackId)
222
        //generateWaveform()
223
    }
224
*/
225
    property bool noThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
226
    property string baseThumbPath: noThumbs ? '' : 'image://thumbnail/' + binId + '/' + documentId + '/#'
227

228
    DropArea { //Drop area for clips
229 230 231
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
232
        property string dropSource
233
        property int dropRow: -1
234 235
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
236
            dropSource = drag.getDataAsString('kdenlive/effectsource')
237 238 239
        }
        onDropped: {
            console.log("Add effect: ", dropData)
240
            if (dropSource == '') {
241 242 243
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
244
                controller.copyClipEffect(clipRoot.clipId, dropSource);
245
            }
246
            dropSource = ''
247
            dropRow = -1
248
            drag.acceptProposedAction
249 250
        }
    }
251 252
    MouseArea {
        id: mouseArea
253
        enabled: root.activeTool === 0
254
        anchors.fill: clipRoot
255
        acceptedButtons: Qt.RightButton
256
        hoverEnabled: root.activeTool === 0
257
        cursorShape: (trimInMouseArea.drag.active || trimOutMouseArea.drag.active)? Qt.SizeHorCursor : dragProxyArea.cursorShape
258
        onPressed: {
259
            root.autoScrolling = false
260
            root.mainItemId = clipRoot.clipId
261
            if (mouse.button == Qt.RightButton) {
262
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
263
                    controller.requestAddToSelection(clipRoot.clipId, true)
264
                }
265
                root.mainFrame = Math.round(mouse.x / timeline.scaleFactor)
266
                root.showClipMenu(clipRoot.clipId)
267
            }
268
        }
269
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down || event.key === Qt.Key_Escape)
270
        Keys.onLeftPressed: {
271 272
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true);
273 274
        }
        Keys.onRightPressed: {
275 276
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + offset, true, true, true);
277
        }
278 279 280 281 282 283
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
284 285
        Keys.onEscapePressed: {
            timeline.grabCurrent()
286
            //focus = false
287
        }
288
        onPositionChanged: {
289 290
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
291
        }
292 293 294 295
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
296

297 298
        onExited: {
            endDrag()
299
        }
300
        onWheel: zoomByWheel(wheel)
301

302
        Loader {
303
            // Thumbs container
304
            id: thumbsLoader
305
            anchors.fill: parent
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
306 307
            anchors.leftMargin: parentTrack.isAudio ? 0 : clipRoot.border.width
            anchors.rightMargin: parentTrack.isAudio ? 0 : clipRoot.border.width
308 309 310
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
311 312
            asynchronous: true
            visible: status == Loader.Ready
313
            source: clipRoot.hideClipViews || clipRoot.itemType == 0 || clipRoot.itemType === ProducerType.Color ? "" : parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : timeline.showThumbnails ? "ClipThumbs.qml" : ""
314
        }
315

316 317 318 319
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
320 321
            anchors.margins: clipRoot.border.width
            //clip: true
322
            property bool showDetails: (!clipRoot.selected || !effectRow.visible) && container.height > 2.2 * labelRect.height
323 324

            Repeater {
325
                // Clip markers
326 327 328 329
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
330
                    visible: markerBase.x >= 0 && markerBase.x < clipRoot.width
331 332 333 334
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
335
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale - clipRoot.border.width : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale - clipRoot.border.width;
336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
355
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
356
                            onClicked: proxy.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
357 358 359 360 361 362
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
363
                        font: miniFont
364 365 366 367 368 369 370 371
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
372
                }
373 374
            }

375 376 377
            MouseArea {
                // Left resize handle
                id: trimInMouseArea
378
                x: -clipRoot.border.width
379 380
                height: parent.height
                width: root.baseUnit / 2
381
                enabled: !isLocked && (pressed || clipRoot.width > 3 * width)
382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402
                hoverEnabled: true
                drag.target: trimInMouseArea
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property bool shiftTrim: false
                property bool controlTrim: false
                property bool sizeChanged: false
                cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
                onPressed: {
                    root.autoScrolling = false
                    clipRoot.originalX = clipRoot.x
                    clipRoot.originalDuration = clipDuration
                    shiftTrim = mouse.modifiers & Qt.ShiftModifier
                    controlTrim = mouse.modifiers & Qt.ControlModifier
                    if (!shiftTrim && clipRoot.grouped) {
                        clipRoot.initGroupTrim(clipRoot)
                    }
                    trimIn.opacity = 0
                }
                onReleased: {
                    root.autoScrolling = timeline.autoScroll
403
                    x = -clipRoot.border.width
404 405 406 407 408 409 410
                    if (sizeChanged) {
                        clipRoot.trimmedIn(clipRoot, shiftTrim, controlTrim)
                        sizeChanged = false
                    }
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
411 412 413
                        var currentFrame = Math.round((clipRoot.x + (x + clipRoot.border.width)) / timeScale)
                        var currentClipPos = clipRoot.modelStart
                        var delta = currentFrame - currentClipPos
414
                        if (delta !== 0) {
415
                            if (maxDuration > 0 && delta < -inPoint && !(mouse.modifiers & Qt.ControlModifier)) {
416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440
                                delta = -inPoint
                            }
                            var newDuration =  clipDuration - delta
                            sizeChanged = true
                            clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
                        }
                    }
                }
                onEntered: {
                    if (!pressed) {
                        trimIn.opacity = 1
                    }
                }
                onExited: {
                    trimIn.opacity = 0
                }
                Rectangle {
                    id: trimIn
                    anchors.left: parent.left
                    width: clipRoot.border.width
                    height: parent.height
                    color: 'lawngreen'
                    opacity: 0
                    Drag.active: trimInMouseArea.drag.active
                    Drag.proposedAction: Qt.MoveAction
441
                    visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && parent.enabled)
442 443 444 445 446 447 448 449 450 451 452

                    ToolTip {
                        visible: trimInMouseArea.containsMouse && !trimInMouseArea.pressed
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
453
                            font: miniFont
454 455 456 457 458 459 460 461 462 463 464 465 466 467 468
                            text: i18n("In:%1\nPosition:%2", timeline.simplifiedTC(clipRoot.inPoint),timeline.simplifiedTC(clipRoot.modelStart))
                        }
                    }
                }
            }

            MouseArea {
                // Right resize handle
                id: trimOutMouseArea
                anchors.right: parent.right
                anchors.rightMargin: -clipRoot.border.width
                anchors.top: parent.top
                height: parent.height
                width: root.baseUnit / 2
                hoverEnabled: true
469
                enabled: !isLocked && (pressed || clipRoot.width > 3 * width)
470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499
                property bool shiftTrim: false
                property bool controlTrim: false
                property bool sizeChanged: false
                cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
                drag.target: trimOutMouseArea
                drag.axis: Drag.XAxis
                drag.smoothed: false

                onPressed: {
                    root.autoScrolling = false
                    clipRoot.originalDuration = clipDuration
                    anchors.right = undefined
                    shiftTrim = mouse.modifiers & Qt.ShiftModifier
                    controlTrim = mouse.modifiers & Qt.ControlModifier
                    if (!shiftTrim && clipRoot.grouped) {
                        clipRoot.initGroupTrim(clipRoot)
                    }
                    trimOut.opacity = 0
                }
                onReleased: {
                    root.autoScrolling = timeline.autoScroll
                    anchors.right = parent.right
                    if (sizeChanged) {
                        clipRoot.trimmedOut(clipRoot, shiftTrim, controlTrim)
                        sizeChanged = false
                    }
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var newDuration = Math.round((x + width) / timeScale)
500
                        if (maxDuration > 0 && (newDuration > maxDuration - inPoint) && !(mouse.modifiers & Qt.ControlModifier)) {
501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524
                            newDuration = maxDuration - inPoint
                        }
                        if (newDuration != clipDuration) {
                            sizeChanged = true
                            clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
                        }
                    }
                }
                onEntered: {
                    if (!pressed) {
                        trimOut.opacity = 1
                    }
                }
                onExited: trimOut.opacity = 0
                ToolTip {
                    visible: trimOutMouseArea.containsMouse && !trimOutMouseArea.pressed
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
525
                        font: miniFont
526 527 528 529 530 531 532 533 534 535 536 537
                        text: i18n("Out: ") + timeline.simplifiedTC(clipRoot.outPoint)
                    }
                }
                Rectangle {
                    id: trimOut
                    anchors.right: parent.right
                    width: clipRoot.border.width
                    height: parent.height
                    color: 'red'
                    opacity: 0
                    Drag.active: trimOutMouseArea.drag.active
                    Drag.proposedAction: Qt.MoveAction
538
                    visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && parent.enabled)
539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580
                }
            }

            TimelineTriangle {
                // Green fade in triangle
                id: fadeInTriangle
                fillColor: 'green'
                width: Math.min(clipRoot.fadeIn * timeScale, container.width)
                height: parent.height
                anchors.left: parent.left
                anchors.top: parent.top
                opacity: 0.4
            }

            TimelineTriangle {
                // Red fade out triangle
                id: fadeOutCanvas
                fillColor: 'red'
                width: Math.min(clipRoot.fadeOut * timeScale, container.width)
                height: parent.height
                anchors.right: parent.right
                anchors.top: parent.top
                opacity: 0.4
                transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
            }

            Item {
                // Clipping container for clip names
                anchors.fill: parent
                clip: true
                Rectangle {
                    // Clip name background
                    id: labelRect
                    color: clipRoot.selected ? 'darkred' : '#66000000'
                    y: 0
                    width: label.width + 2 * clipRoot.border.width
                    height: label.height
                    visible: clipRoot.width > width / 2
                    Text {
                        // Clip name text
                        id: label
                        text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
581
                        font: miniFont
582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620
                        anchors {
                            top: labelRect.top
                            left: labelRect.left
                            leftMargin: clipRoot.border.width
                        }
                        color: 'white'
                        //style: Text.Outline
                        //styleColor: 'black'
                    }
                }

                Rectangle {
                    // Offset info
                    id: offsetRect
                    color: 'darkgreen'
                    width: offsetLabel.width + radius
                    height: offsetLabel.height
                    radius: height/3
                    x: labelRect.width + 4
                    y: 2
                    visible: labelRect.visible && positionOffset != 0
                    MouseArea {
                        id: offsetArea
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        anchors.fill: parent
                        onClicked: {
                            clearAndMove(positionOffset)
                        }
                        ToolTip {
                            visible: offsetArea.containsMouse
                            delay: 1000
                            timeout: 5000
                            background: Rectangle {
                                color: activePalette.alternateBase
                                border.color: activePalette.light
                            }
                            contentItem: Label {
                                color: activePalette.text
621
                                font: miniFont
622 623 624 625 626 627
                                text: positionOffset < 0 ? i18n("Offset: -%1", timeline.simplifiedTC(-positionOffset)) : i18n("Offset: %1", timeline.simplifiedTC(positionOffset))
                            }
                        }
                        Text {
                            id: offsetLabel
                            text: positionOffset
628
                            font: miniFont
629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653
                            anchors {
                                horizontalCenter: parent.horizontalCenter
                                topMargin: 1
                                leftMargin: 1
                            }
                            color: 'white'
                            style: Text.Outline
                            styleColor: 'black'
                        }
                    }
                }

                Rectangle {
                    // effect names background
                    id: effectsRect
                    color: '#555555'
                    width: effectLabel.width + 2
                    height: effectLabel.height
                    x: labelRect.x
                    anchors.top: labelRect.bottom
                    visible: labelRect.visible && clipRoot.effectNames != '' && container.showDetails
                    Text {
                        // Effect names text
                        id: effectLabel
                        text: clipRoot.effectNames
654
                        font: miniFont
655 656 657 658 659 660 661 662 663 664 665 666
                        visible: effectsRect.visible
                        anchors {
                            top: effectsRect.top
                            left: effectsRect.left
                            leftMargin: 1
                            // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                        }
                        color: 'white'
                        //style: Text.Outline
                        styleColor: 'black'
                    }
                }
667 668 669 670
                
               Rectangle{
                    //proxy 
                    id:proxyRect
671
                    color: '#fdbc4b'
672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693
                    width: labelRect.height
                    height: labelRect.height
                    x: labelRect.x
                    anchors.top: labelRect.top
                    anchors.left: labelRect.right
                    visible: clipRoot.isProxy && !clipRoot.isAudio
                    Text {
                        // Proxy P
                        id: proxyLabel
                        text: "P"
                        font.pointSize: root.fontUnit +1
                        visible: proxyRect.visible
                        anchors {
                            top: proxyRect.top
                            left: proxyRect.left
                            leftMargin: (labelRect.height-proxyLabel.width)/2
                            topMargin: (labelRect.height-proxyLabel.height)/2
                        }
                        color: 'black'
                        styleColor: 'black'
                    }
                }
694
            }
695 696 697 698 699 700 701 702 703 704 705 706

            KeyframeView {
                id: effectRow
                clip: true
                anchors.fill: parent
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.hideClipViews ? 0 : clipRoot.keyframeModel
            }
707
        }
708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

740 741 742
        MouseArea {
            // Add start composition area
            id: compInArea
743 744
            anchors.left: parent.left
            anchors.bottom: parent.bottom
745
            width: Math.min(root.baseUnit, container.height / 3)
746
            height: width
747 748 749 750 751 752 753 754 755 756 757 758 759 760
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            visible: !clipRoot.isAudio
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId && compositionIn.visible
            onPressed: {
                timeline.addCompositionToClip('', clipRoot.clipId, 0)
            }
            ToolTip {
                visible: compInArea.containsMouse && !dragProxyArea.pressed
                delay: 1000
                timeout: 5000
                background: Rectangle {
                    color: activePalette.alternateBase
                    border.color: activePalette.light
761
                }
762 763
                contentItem: Label {
                    color: activePalette.text
764
                    font: miniFont
765
                    text: i18n("Click to add composition")
766 767
                }
            }
768 769 770 771 772
            Rectangle {
                // Start composition box
                id: compositionIn
                anchors.bottom: parent.bottom
                anchors.left: parent.left
773
                width: compInArea.containsMouse ? parent.width : 5
774 775 776 777 778 779 780 781
                height: width
                radius: width / 2
                visible: clipRoot.width > 4 * parent.width && mouseArea.containsMouse && !dragProxyArea.pressed
                color: Qt.darker('mediumpurple')
                border.width: 3
                border.color: 'mediumpurple'
                Behavior on width { NumberAnimation { duration: 100 } }
            }
782
        }
783 784 785 786

        MouseArea {
            // Add end composition area
            id: compOutArea
787 788
            anchors.right: parent.right
            anchors.bottom: parent.bottom
789
            width: Math.min(root.baseUnit, container.height / 3)
790
            height: width
791 792 793 794 795 796
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId && compositionOut.visible
            visible: !clipRoot.isAudio
            onPressed: {
                timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
797
            }
798
            ToolTip {
799
                visible: compOutArea.containsMouse && !dragProxyArea.pressed
800 801 802 803 804 805 806 807
                delay: 1000
                timeout: 5000
                background: Rectangle {
                    color: activePalette.alternateBase
                    border.color: activePalette.light
                }
                contentItem: Label {
                    color: activePalette.text
808
                    font: miniFont
809
                    text: i18n("Click to add composition")
810 811
                }
            }
812 813 814 815 816
            Rectangle {
                // End composition box
                id: compositionOut
                anchors.bottom: parent.bottom
                anchors.right: parent.right
817
                width: compOutArea.containsMouse ? parent.height : 5
818 819 820 821 822 823 824
                height: width
                radius: width / 2
                visible: clipRoot.width > 4 * parent.width && mouseArea.containsMouse && !dragProxyArea.pressed
                color: Qt.darker('mediumpurple')
                border.width: 3
                border.color: 'mediumpurple'
                Behavior on width { NumberAnimation { duration: 100 } }
825 826
            }
        }
827 828 829

        MouseArea {
            // Fade out drag zone
830
            id: fadeOutMouseArea
831 832 833
            anchors.right: parent.right
            anchors.rightMargin: clipRoot.fadeOut <= 0 ? 0 : fadeOutCanvas.width - width / 2
            anchors.top: parent.top
834
            width: Math.min(root.baseUnit, container.height / 3)
835
            height: width
836
            hoverEnabled: true
837 838
            cursorShape: Qt.PointingHandCursor
            drag.target: fadeOutMouseArea
839
            drag.axis: Drag.XAxis
840
            drag.minimumX: - Math.ceil(width / 2)
841 842
            drag.maximumX: container.width + Math.ceil(width / 4)
            visible: clipRoot.width > 3 * width && mouseArea.containsMouse && !dragProxyArea.pressed
843 844
            property int startFadeOut
            property int lastDuration: -1
845 846 847 848
            drag.smoothed: false
            onClicked: {
                if (clipRoot.fadeOut == 0) {
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', 0, -2)
849 850
                }
            }
851
            onPressed: {
852
                root.autoScrolling = false
853 854
                startFadeOut = clipRoot.fadeOut
                anchors.right = undefined
855
                fadeOutCanvas.opacity = 0.6
856 857
            }
            onReleased: {
858
                fadeOutCanvas.opacity = 0.4
859
                root.autoScrolling = timeline.autoScroll
860
                anchors.right = parent.right
861 862 863
                var duration = clipRoot.fadeOut
                timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, startFadeOut)
                bubbleHelp.hide()
864 865 866
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
867
                    var delta = clipRoot.clipDuration - Math.floor((x + width / 2 - clipRoot.border.width)/ timeScale)
868 869 870 871 872 873
                    var duration = Math.max(0, delta)
                    duration = Math.min(duration, clipRoot.clipDuration)
                    if (lastDuration != duration) {
                        lastDuration = duration
                        timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                        // Show fade duration as time in a "bubble" help.
874
                        var s = timeline.simplifiedTC(clipRoot.fadeOut)
875
                        bubbleHelp.show(clipRoot.x + x, parentTrack.y + parentTrack.height, s)
876
                    }
877 878
                }
            }
879 880
            Rectangle {
                id: fadeOutControl
881 882 883
                anchors.top: parent.top
                anchors.right: clipRoot.fadeOut > 0 ? undefined : parent.right
                anchors.horizontalCenter: clipRoot.fadeOut > 0 ? parent.horizontalCenter : undefined
884
                width: fadeOutMouseArea.containsMouse || Drag.active ? parent.width : 5
885
                height: width
886
                radius: width / 2
887 888
                color: 'darkred'
                border.width: 3
889 890 891
                border.color: 'red'
                enabled: !isLocked && !dragProxy.isComposition
                Drag.active: fadeOutMouseArea.drag.active
892
                Behavior on width { NumberAnimation { duration: 100 } }
893 894 895 896 897
                Rectangle {
                    id: fadeOutMarker
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    color: 'red'
898
                    height: container.height
899
                    width: 1
900
                    visible : clipRoot.fadeOut > 0 && (fadeOutMouseArea.containsMouse || fadeOutMouseArea.drag.active)
901
                }
902 903 904 905 906 907 908 909 910 911 912 913 914 915 916
                ToolTip {
                    visible: clipRoot.fadeOut > 0 && fadeOutMouseArea.containsMouse && !fadeOutMouseArea.drag.active
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
                        font: miniFont
                        text: '%1: %2'.arg(i18n("Duration"))
                        .arg(timeline.simplifiedTC(clipRoot.fadeOut))
                    }
                }
917
            }
918
        }